title: Passing object as a prop of component in react
body: <p>I have an object which is in state, I would want to send this object to a child component and again get it back after updating the object.How do I do it ?</p>
  
  <p>This is the parent component.</p>
  
  <pre><code>class TextN extends React.Component {
  
  constructor(props){
      console.log('Text constructor called');
    super(props);
    this.state = {
      w:'auto',
      h:'auto',
      widthF:32,
      heightF:23,
      rightClick:false,
      textObj:{
          modalShow: false,
          message: 'Text',
          textPosY:5,
          textPosX:5,
          degreeOfRot:0,
          maxNumberOfChar:0,
          fontSize: 15,
          fontWeight:'bold',
          fontfamily:'arial',
      },
    }
  }
  
  onDrag(e,ui){
      console.log(e);
      console.log(ui);
  }
  
  onDragStop(e,ui){
      console.log(e);
      console.log(ui);
  }
  
  editText(){
      var tObj = this.state.textObj;
      tObj.modalShow = true;
      this.setState({ textObj: tObj }); 
  }
  
  getData(dataText){
      var tObj = this.state.textObj;
      tObj.modalShow =false;
      tObj.message = dataText;
      this.setState({ textObj: tObj }); 
  }
  
  
  render() {
      var style = {
  
          titleText:{
              fontFamily:this.state.textObj.fontfamily,
              fontSize:this.state.textObj.fontSize,
              fontWeight:this.state.textObj.fontWeight,
          },
      }
      return (
          &lt;Rnd ref={c =&gt; { this.rnd = c; }}
          initial={{
              x: this.state.textObj.textPosX,
              y: this.state.textObj.textPosY,
              width: this.state.w,
              height: this.state.h,
          }}
          style={style1}
          minWidth={this.state.widthF}
          minHeight={this.state.heightF}
          maxWidth={500}
          maxHeight={500}
          bounds={'parent'}
          //onDrag={this.onDrag.bind(this)}
          onDragStop={this.onDragStop.bind(this)}
          isResizable={{top:false, right:true, bottom:false, left:false, topRight:false, bottomRight:false, bottomLeft:false, topLeft:false}}
          &gt;
          &lt;label style={style.titleText} onClick={this.editText.bind(this)}&gt;{this.state.textObj.message}&lt;/label&gt;
          **&lt;TModal show={this.state.textObj} callBack={this.getData.bind(this)}/&gt;**
          &lt;/Rnd&gt;
      )
  }
  </code></pre>
  
  <p>}</p>
  
  <p>And in the child component I receive the props as an object I update the object with new values and I return the object to the callback function.</p>
  
  <pre><code>    class TextModal extends React.Component{
  constructor(props) {
      console.log('Modal constructor called');
      super(props);
      this.state = {
        showMod: this.props.show.modalShow,
        text:'Text',
        fontModal:false,
        fontObject:{},
        textObj:{},
        displayColorPicker:false,
        color: {
        r: '241',
        g: '112',
        b: '19',
        a: '1',
      },
      };
      }
  
  componentWillReceiveProps(nextProps){
      console.log('inside components will recieve');
      this.setState({showMod : this.props.show.modalShow});
      this.setState({text:this.props.show.message});
      this.setState({textObj:this.props.show});
      console.log(this.props.show);
  }
  
  shouldComponentUpdate(nextProps, nextState){
      if(this.state.showMod !== nextState.showMod){
  
          return true;
  
      }else if(this.state.fontModal !== nextState.fontModal){
  
          return true;
  
      }else if(this.state.displayColorPicker !== nextState.displayColorPicker){
  
          return true;
  
      }else if(this.state.color !== nextState.color){
  
          return true;
  
      }else if(this.state.text !== nextState.text){
  
          return true;
      }
  
      return false;
  
  }
  
  
  
  onSubmit(e){
      this.props.callBack(this.state.textObj);
  }
  
  close() {
      console.log('close is called');
      this.setState({ showMod: false });
      this.setState({fontModal:false});
  }
  
  
  
  handleChange(e){
      this.setState({text:e.target.value});
  }
  
  
  
  
  
  render(){
  
      return(
          &lt;div&gt;
          &lt;Modal show={this.state.showMod} onHide={this.close.bind(this)}&gt;
              &lt;Modal.Header style={{textAlign:'center'}}&gt;
                  &lt;Modal.Title&gt;Text&lt;/Modal.Title&gt;
              &lt;/Modal.Header&gt;
              &lt;Modal.Body style={{textAlign:'center'}}&gt;
              &lt;form&gt;
              &lt;label&gt;Text:&lt;/label&gt;&lt;input type="text" ref={(c) =&gt; this.title = c} name="title" onChange={this.handleChange.bind(this)} value={this.state.text}/&gt;&lt;br /&gt;
              &lt;label&gt;Current Left Position:&lt;/label&gt;&lt;input type="number" value={this.state.textObj.textPosX}/&gt;&lt;br /&gt;
              &lt;label&gt;Current Top Position:&lt;/label&gt;&lt;input type="number" value={this.state.textObj.textPosY}/&gt;&lt;br /&gt;
              &lt;label&gt;Degree of Rotation:&lt;/label&gt;&lt;input type="number" value={this.state.textObj.degreeOfRot}/&gt;&lt;br /&gt;
              &lt;label&gt;Max # of Characters:&lt;/label&gt;&lt;input type="number" value={this.state.textObj.maxNumberOfChar}/&gt;&lt;br /&gt;
              &lt;label&gt;Click to select Font:&lt;/label&gt;&lt;input style={{fontFamily:this.state.fontObject.fontFamily,fontWeight:this.state.fontObject.fontStyle}} value={this.state.fontObject.fontFamily} onClick={this.showFontModal.bind(this)}/&gt;&lt;br /&gt;
              &lt;label&gt;Click to select Color:&lt;/label&gt;&lt;input style={{backgroundColor:styles.color.background}} onClick={this.handleColorPicker.bind(this)}/&gt;&lt;br /&gt;
              &lt;/form&gt;
              { this.state.displayColorPicker ? &lt;div style={ styles.popover }&gt;
              &lt;div style={ styles.cover } onClick={ this.handleColorClose.bind(this) }/&gt;
                  &lt;SketchPicker color={ this.state.color } onChange={ this.handleChangeColor.bind(this) } /&gt;
              &lt;/div&gt; : null }
              &lt;/Modal.Body&gt;
              &lt;Modal.Footer&gt;
                  &lt;Button bsStyle="primary" bsSize="small" onClick={this.onSubmit.bind(this)}&gt;Ok&lt;/Button&gt;
                  &lt;Button bsStyle="warning" bsSize="small" onClick={this.close.bind(this)}&gt;Close&lt;/Button&gt;
              &lt;/Modal.Footer&gt;
          &lt;/Modal&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>}</p>