EN
React - render props (class component)
0 points
In this article, we would like to show you how to render props in React class components.
Below we create Container class component which renders name and two children <div> elements passed as props.
Runnable example:
xxxxxxxxxx1
// Note: Uncomment import lines while working with React project.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
class Container extends React.Component {6
constructor(props) {7
super(props);8
}9
render() {10
return (11
<div>12
<div>{this.props.name}</div>13
<div>{this.props.children}</div>14
</div>15
);16
}17
}18
19
class App extends React.Component {20
constructor(props) {21
super(props);22
}23
render() {24
return (25
<Container name="Property name ...">26
<div>Children text ...</div>27
<div>Children text ...</div>28
</Container>29
);30
}31
}32
33
const root = document.querySelector('#root');34
ReactDOM.render(<App />, root );