CODEWITHSUNDEEP
javascriptreactjs
Alan Jenshen
Alan Jenshen

Reputation: 3239

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 {

}

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

Upvotes: 16

Views: 51053

Answers (4)

vairavel flash
vairavel flash

Reputation: 83

If you want many component in one file and use it another file. create and export them seperately.

export const FirstComponent = () => {
return <h1>First Component</h1>;
};

export const SecondComponent = () => {
return <h1>Second Component</h1>;
};

In Main.js file

import { FirstComponent, SecondComponent } from "./ManyComponent.js";
export default function App() {
return (
<div className="App">
  <FirstComponent/>
  <SecondComponent/>
</div>
);
}

If you want component to be used within same file.In Main.js file

export default function App() {
return (
<div className="App">
<FirstComponent/>
</div>
);
}
const FirstComponent = () => {
return <h1>First Component</h1>;
};

Upvotes: 1

Mayank Shukla
Mayank Shukla

Reputation: 104369

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 {

}

Upvotes: 21

ickyrr
ickyrr

Reputation: 2113

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>);

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074028

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>

Upvotes: 10

Related Questions