CODEWITHSUNDEEP
javascriptreactjs
Sandeep Pandit
Sandeep Pandit

Reputation: 13

Can We render two different contents in two different divs?

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <span>Is React a JavaScript library for building user-interfaces?</span>,
  document.getElementById("question1")
)
ReactDOM.render(
  <form class="options">
    <input type="radio" value="Yes" />
    <input type="radio" value="No" />
  </form>,
  document.getElementsByClassName("options-main-container")
);

what's Wrong in this Code ??? I tried with different ways but not able to solve this please anyone help me to solve this

Upvotes: 1

Views: 39

Answers (2)

Harish
Harish

Reputation: 1911

You can use querySelector instead getElementsByClassName. Because getElementsByClassName returns nodelist Array and querySelector returns first matched element.

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <span>Is React a JavaScript library for building user-interfaces?</span>,
  document.getElementById("question1")
)
ReactDOM.render(
  <form class="options">
    <input type="radio" value="Yes" />
    <input type="radio" value="No" />
  </form>,
  document.querySelector(".options-main-container")
);

Upvotes: 0

ravibagul91
ravibagul91

Reputation: 20755

Yes, it is perfectly fine to call ReactDOM.render multiple times on the same page.

Here is the problem,

document.getElementsByClassName("options-main-container")

This returns array of elements with class name options-main-container. So you cannot directly render the element using this code. Either you need to iterate over the array or take just 1st matching element like,

document.getElementsByClassName("options-main-container")[0] //This will get the 1st matching element

Upvotes: 1

Related Questions