JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/prop-types@15.5.10/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>
Babel + JSX
class Child extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired
}
render() {
return (
<span>Hello {this.props.name}!!</span>
)
}
}
class Parent extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired
}
render() {
return (
React.cloneElement(this.props.children, { name: this.props.name })
)
}
}
ReactDOM.render((
<Parent name='Jerry'>
<Child />
</Parent>
), document.getElementById('container'));