Change style in react child componnet from event in parent componnet

Question

I have a react component wihch contains two child components, In the parent component i have a button that launches a function to change style in both the parent and the child. I managed to change the style in the parent but not in the child here's what i've done

var XBlockButtons = React.createClass({

getInitialState(){

return{
  Componentstyle:{display:"block"},
  HTMLstyle:{display:"none"},
}

},

showhtml(){
this.setState({
    Componentstyle:{display:"none"},
    HTMLstyle:{display:"block"}

})
},


render: function() {


var style={display:'block'}

return (


  <div className="add-xblock-component new-component-item adding">

    <div className="new-component" style={this.state.Componentstyle}>
      <ul className="new-component-type" >

        <li>

            <button type="button" className="multiple-templates add-xblock-component-button" data-type="html" onClick={this.showhtml}>
              <span className="large-template-icon large-html-icon"></span>
              <span className="sr"> Add Component:</span>
              <span className="name">HTML</span>
            </button>

        </li> /ul></div>
      <HTML/>

-----Child-----

var HTML = React.createClass({
render:function(){

    return(
      <div className="new-component-templates new-component-html" style={this.state.HTMLstyle}></div>);})};

score 1 · Accepted Answer · answered May 16 '17 at 12:43

1

Pass on the style as prop to the child component and then use it there like

Parent:

 <HTML HTMLstyle={this.state.HTMLstyle}/>

Now in child

var HTML = React.createClass({
componentWillMount: function(){
     this.setState({HTMLstyle: this.props.HTMLstyle})
},
componentWillReceiveProps: function(nextProps) {
      this.setState({HTMLstyle: nextProps.HTMLstyle})
},
render:function(){

    return(
      <div className="new-component-templates new-component-html" style={this.state.HTMLstyle}></div>
    );
  }
)};

answered May 16 '17 at 12:43

Shubham Khatri

270,417
55
406
400

Thanks for your answer, it's working great, however i couldn't understand why componentWillMount and componentWiilReceivePropos are used – ChemseddineZ May 16 '17 at 12:47
1

componentWillReceiveProps is called everytime the parent component renders and not at the first time when the child component renders, so for the first render we use componentWillMount and for any further renders we use componentWillReceiveProps – Shubham Khatri May 16 '17 at 13:02
One more question, if i had to reverse the process, if i have to pass style from child to parent what do i need to change ? – ChemseddineZ May 16 '17 at 13:31
See this http://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs/38397755#38397755 for the reverse method – Shubham Khatri May 16 '17 at 13:31

score 0 · Answer 2 · answered May 16 '17 at 12:37

0

That's because you need to pass in the style values as props to the child component as well

<HTML {...HTMLstyle}/>

I might be wrong on the syntax but you get the idea, I hope.

answered May 16 '17 at 12:37

zenwraight

2,002
1
10
14

Change style in react child componnet from event in parent componnet

2 Answers2