Multiple components within a file

Question

Says I have component A

like

export default class ComponentA extends components {
   render(){
      return() //use componentB here?
   }
}

class ComponentB extends components {

}

how can I create another component and use it within ComponentA?

Answer 1

How can I create another component and use it within ComponentA?

There are two possible ways of doing that:

1- Define the component in the same file, exporting of that component will be not required because you will use that component in the same file.

2- Define the component in another file then export that component. Importing of component will be required in this case.

---

We can create as many components as we want in the same file, and we can use those components in the same way as we use HTML tags div, span, p etc.

Example:

Using ComponentB inside another component ComponentA:

export default class ComponentA extends components {
   render(){
      return(
           <div>
              {/*other code*/}
              <ComponentB />            // notice here, rendering ComponentB
           </div>
      )
   }
}

Define ComponentB in same file like this:

class ComponentB extends components {

}

Define ComponentB like this in another file:

export default class ComponentB extends components {

}

Answer 2

Just use it, like any other component:

export default class ComponentA extends components {
   render() {
      return <ComponentB />; // Use ComponentB here
   }
}
class ComponentB extends components {
  render() {
    return <div>I'm B</div>;
  }
}

Example:

/*export default*/ class ComponentA /*extends components*/ extends React.Component {
   render() {
      return <ComponentB />; // Use ComponentB here
   }
}
class ComponentB /*extends components*/ extends React.Component {
  render() {
    return <div>I'm B</div>;
  }
}

ReactDOM.render(
  <ComponentA />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 3

Yes, you are in the right track.

export default class ComponentA extends React.Component {
   render(){
      return(<ComponentB />);
   }
}

class ComponentB extends React.Component {
    render() {
      return (<h1>Hello world! This is Component B</h1>)
    }
}

or better yet, use stateless components like so: (if it's a really dumb component)

const ComponentB = () => (<h1>Hello world! This is Component B</h1>);