Can we only create one component instance at a time?

Frequently Asked Questions React.js FAQ
1

Question

In the context of this exercise, can we only create one component instance at a time?

Answer

When running the ReactDOM.render() method, you can only pass in one value as the first argument, which is the component to be rendered. However, you can create more than one component instance at a time, by simply wrapping them inside of another element, such as a <div>. For example, you could do the following to render two components,

ReactDOM.render(
  <div>
    <ComponentOne />
    <ComponentTwo />
  </div>,
  document.getElementById('app')
);

Another option is to create another component for the purpose of wrapping multiple components to render.

8 Likes
2

Can I nest a component inside another component class render method?

class Component1 extends React.Component {
  render() {...}
};
  
class Component2 extends React.Component {
  render() {
    return <React.Fragment>
      <Component1 />
      <p>...</p>
    </React.Fragment>
  }
  
};
12 Likes
4

Yes you can definitely do that.
The Process is known as Component Interaction which you will be taught in the upcoming lesson.

13 Likes