0

I have react component with a number of various children: 

render() {
    let Tag = '${this.props.wrapper}';
    return (
        <Tag>
            {this.props.children}
        </Tag>
    );
}

When some event occured i need to change className property of a number of children. Is there any way to do this from parent component?

Season
  • 4,056
  • 2
  • 16
  • 23
madmanul
  • 420
  • 4
  • 14
  • 1
    Possibly a [dup](http://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children) where you can find the answer. – Season Jul 23 '16 at 14:02

2 Answers2

1

I think you're looking for something like this:

render() {
  return React.createElement(
    this.props.wrapper,
    null,

    // Children
    React.cloneElement(
      this.props.children,
      {className: 'assignedChildClassname'}
    )
  );
}

Does this solve your problem?

amann
  • 5,449
  • 4
  • 38
  • 46
0

In your parent component, you can pass classNames as props

<Child className={this.state.classes}/>

Your parent state will have classes that would be changed on click

Piyush.kapoor
  • 6,715
  • 1
  • 21
  • 21
  • not in this case. Children may contain their own initial className, which will be replaced with `this.state.classes`(it should be changed only in some cases). – madmanul Jul 23 '16 at 11:46
  • in your child component u can use className={this.props.className + myextraClasses} – Piyush.kapoor Jul 23 '16 at 12:48