Several components in 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 in ComponentA?

Answer 1

How to create another component and use it in ComponentA?

There are two possible ways to do this:

1 - Define the component in the same file, you will not need to export this component because you will use this component in the same file.

2 - Define the component in another file, then export this component. Component import will be necessary in this case.

---

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

Example:

Using ComponentB inside another ComponentA component:

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

Define ComponentB in the same file:

 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 on 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 this: (if it's a really dumb component)

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