EN
React - render props
0
points
In this article, we would like to show you how to render props in React functional components.
Below we create Container functional component which renders name and two children <div> elements passed as props.
Runnable example:
// ONLINE-RUNNER:browser;
// Note: Uncomment import lines while working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';
const Container = ({name, children}) => {
return (
<div>
<div>{name}</div>
<div>{children}</div>
</div>
);
};
const App = () => {
return (
<div>
<Container name="Property name ...">
<div>Children text ...</div>
<div>Children text ...</div>
</Container>
</div>
);
};
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );