1 minute read

In React Components we can make use of the children (props.children) to pass content from one component to another.
We need to make use of the Component API and make use of the props.

It doesn’t matter if you have a class component or function component, the props should never change.

Props are Read-Only.

Code example on how to pass the content of a component using this.props.children:

const MyComponent = props => <React.Fragment>{props.children}</React.Fragment>

You can use this.props.children to render whatever children the component contains:

import React from 'react'

const MyComponent = props => <React.Fragment>{props.children}</React.Fragment>;

const WrapperComponent = () => <MyComponent><h1>Hello world!</h1></MyComponent>;

export default WrapperComponent;

Then to consume the newly created component, just use export default WrapperComponent and then elsewhere import {WrapperComponent} from “./WrapperComponent“.

Thanks for reading. I hope you learned something interesting about React!
If you found this article useful, please share it with others. Don’t forget to subscribe to get notified for the upcoming articles.