Multiple Components Within A File

Says I have component A like export default class ComponentA extends components { render(){ return() //use componentB here? } } class ComponentB extends components {

Solution 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:

exportdefaultclassComponentAextendscomponents {
   render(){
      return(
           <div>
              {/*other code*/}
              <ComponentB />            // notice here, rendering ComponentB
           </div>
      )
   }
}

Define ComponentB in same file like this:

classComponentBextendscomponents {

}

Define ComponentB like this in another file:

exportdefaultclassComponentB extends components {

}

Solution 2:

Just use it, like any other component:

exportdefaultclassComponentAextendscomponents {
   render() {
      return<ComponentB />; // Use ComponentB here
   }
}
classComponentBextendscomponents {
  render() {
    return<div>I'm B</div>;
  }
}

Example:

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

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

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

Solution 3:

Yes, you are in the right track.

exportdefaultclassComponentAextendsReact.Component {
   render(){
      return(<ComponentB />);
   }
}

classComponentBextendsReact.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)

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