{props.children.map(child => <a>{child}</a>)} code example
Example 1: React Children map example
export default class SomeComponent extends React.Component {
render() {
const childrenWithWrapperDiv = React.Children.map(this.props.children, child => {
return (
<div className="some-component-special-class">{child}</div>
);
});
return (
<div className="some-component">
<p>This component has {React.Children.count(this.props.children)} children.</p>
{childrenWithWrapperDiv}
</div>
);
}
}
Example 2: React Children map example
export default class MovieBrowser extends React.Component {
render() {
const currentPlayingTitle = 'Mad Max: Fury Road';
const childrenWithExtraProp = React.Children.map(this.props.children, child => {
return React.cloneElement(child, {
isPlaying: child.props.title === currentPlayingTitle
});
});
return (
<div className="movie-browser">
{childrenWithExtraProp}
</div>
);
}
}