React - adding class to children components

Question

im using react and I have a component that simply needs to render the children and add them a class according to a condition. Whats the best way of doing it?

Answer 1

I figured it out a week ago, this is what I wanted :

export default class ContainerComponent extends React.Component {     constructor(props) {         super(props);          this.modifyChildren = this.modifyChildren.bind(this);     }      modifyChildren(child) {         const className = classNames(             child.props.className,             {...otherClassses}         );          const props = {             className         };          return React.cloneElement(child, props);     }     render() {         return (<div>             {React.Children.map(this.props.children, child => this.modifyChildren(child))}         </div>);     } } 

Answer 2

For the sake of simplicity:

const StyleInjector = ({ children }) => {    const StyledChildren = () =>     React.Children.map(children, child =>       React.cloneElement(child, {         className: `${child.props.className} ${PUT_YOUR_CLASS_HERE}`       })     );    return <StyledChildren />; };