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:
// ONLINE-RUNNER:browser;
// Note: Uncomment import lines while working with React project.
// import React from 'react';
// import ReactDOM from 'react-dom';
class Container extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<div>{this.props.name}</div>
<div>{this.props.children}</div>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Container name="Property name ...">
<div>Children text ...</div>
<div>Children text ...</div>
</Container>
);
}
}
const root = document.querySelector('#root');
ReactDOM.render(<App />, root );