Can I use an already built component inside another component?

Frequently Asked Questions React.js FAQ
1

Question

Can I use an already built component inside another component?

Answer

Absolutely! We can import/export an existing component for use in another component, be it one we have written ourselves or one that another developer has created, by using JavaScript modules.

Example:
Button.js

import React from 'react';

class Button extends React.Component {
  render() {
    return (
      <button>Click Me!</button>
    )
  }
}

export default Button;

and using the Button component inside another component:
index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Button from './Button';

class ComponentCeption extends React.Component {
  render() {
    return (
      <section>
        <h1>This is a heading</h1>
        <span>and here is a button!: <Button /></span>
      </section>
    )
  }
}

ReactDOM.render(<ComponentCeption />, document.getElementById('app'));
1 Like