react children as props code example
Example 1: react props.children proptype
import PropTypes from 'prop-types'
...
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
}
Example 2: react pass props to children
import React, { Children, isValidElement, cloneElement } from 'react';
const Child = ({ doSomething, value }) => (
<div onClick={() => doSomething(value)}>Click Me</div>
);
function Parent({ children }) {
function doSomething(value) {
console.log('doSomething called by child with value:', value);
}
render() {
const childrenWithProps = Children.map(children, child => {
if (isValidElement(child)) {
return cloneElement(child, { doSomething })
}
return child;
});
return <div>{childrenWithProps}</div>
}
};
ReactDOM.render(
<Parent>
<Child value="1" />
<Child value="2" />
</Parent>,
document.getElementById('container')
);
Example 3: react render props children
render() {
return (
<div>
<LoadContent>
{
({ loading }) => <span>{loading}</span>
}
</LoadContent>
</div>
)
}
Example 4: react render props children
<LoadContent url="https://yourendpoint.com">
{({ loading, error, data }) => {
if (loading) return <span>Loading...</span>;
if (error) return <span>Error loading</span>;
return (
<div>
{data.map((item) => (
<div>{item}</div>
))}
</div>
);
}}
</LoadContent>