Markcce Eros Markcce Eros - 1 month ago 19
React JSX Question

ReactJs Include component inside another component

I have a react component/page that goes like this:

import React from 'react';

const About = () => (
<div>
<h2>About</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
);

export default About;


and a second one where I'm be adding a slider:

import React from 'react';

const Slider = () => (
<div>
<h2>Slider</h2>
<p>Slider Goes here</p>
</div>
);

export default Slider;


What I need to do is the include the slider component at the bottom of the About component above so that when I display the About component the slider comes up too.

How do I do this?

Answer

Just like this

import React from 'react';
import Slider from 'path/to/Slider';

const About = () => (
  <div>
    <h2>About</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <Slider />
  </div>
);

export default About;

React - Composing Components

Comments