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:
xxxxxxxxxx1
// Note: Uncomment import lines while working with JSX Compiler.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const Container = ({name, children}) => {6
return (7
<div>8
<div>{name}</div>9
<div>{children}</div>10
</div>11
);12
};13
14
const App = () => {15
return (16
<div>17
<Container name="Property name ...">18
<div>Children text ...</div>19
<div>Children text ...</div>20
</Container>21
</div>22
);23
};24
25
const root = document.querySelector('#root');26
ReactDOM.render(<App />, root );