title: How to get state from child to parent react
body: <p>I'm new in React</p>
  
  <p>I have two components. Parent <code>Square</code>, child <code>Row</code>.</p>
  
  <p>I want to get setValues <code>cellTop</code> and <code>cellLeft</code> from <code>Row</code> to parent and use it.</p>
  
  <p>How can I do it.</p>
  
  <p>My code is bellow</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Square = React.createClass({
  
  
   getInitialState: function () {
  
    return {
  
    countRow: 4,
    countCol: 4,
    mouseOnTable: false,
    onDelRow: false,
    onDelCol: false
  
    }
  
   },
  
  
   appendCol: function() {
  
    var countColNew = this.state.countCol + 1;
  
    this.setState({countCol: countColNew});  //change initiale state "countCol" (add new column)
  
    //console.log(this.state.countCol)
  
   },
  
   appendRow: function() {
  
    var countRowNew = this.state.countRow + 1;
  
    this.setState({countRow: countRowNew});  //change initiale state "countRow" (add new row)
  
    //console.log(this.state.countRow)
  
   },
  
   deleteCol: function() {
  
    var countColNew = this.state.countCol - 1;
  
    this.setState({countCol: countColNew});  //change initiale state "countCol" (delete col)
  
    //console.log(this.state.countCol)
  
   },
  
   deleteRow: function() {
  
    var countRowNew = this.state.countRow - 1;
  
    this.setState({countRow: countRowNew});  //change initiale state (delete row)
  
    //console.log(this.state.countRow)
  
   },
  
  
   hiddenButtons: function(){
    var mouseOnTableNew = true;
    this.setState({mouseOnTable: mouseOnTableNew})
   },
  
  
   showButtons: function(){
    var mouseOnTableNew = false;
    this.setState({mouseOnTable: mouseOnTableNew})
   },
  
  
  
   render: function() {
  
    var timeOut;
  
  
    return (
  
     &lt;div className='square'&gt;
  
      &lt;table className='square__table'
         onMouseOver={this.hiddenButtons}                
         onMouseLeave={() =&gt; {timeOut=setTimeout(this.showButtons,200)}}&gt;
  
  
         &lt;Row countRow={this.state.countRow}
           countCol={this.state.countCol}
           ref={(ref) =&gt; this.state}
  
           /&gt;  
  
  
      &lt;/table&gt;
  
  
         &lt;button className="square__button square__button_append square__button_col-append"
           onClick={this.appendCol}&gt;
         &lt;/button&gt;
  
  
               &lt;button className="square__button square__button_delete square__button_col-delete" 
                 style={this.state.countCol===1 ||
                     this.state.mouseOnTable===false ||
                     this.state.onDelRow===true ? {visibility: "hidden"} : {visibility: "visible"}}
  
                 onClick={this.deleteCol}
                 onMouseOver={() =&gt; {clearTimeout(timeOut);
                      this.setState({onDelCol:true})}}
                 onMouseLeave={() =&gt; {this.setState({onDelCol:false})}}&gt;
               &lt;/button&gt;
  
  
               &lt;button className="square__button square__button_append square__button_row-append" 
                 onClick={this.appendRow}&gt;
               &lt;/button&gt;
  
  
               &lt;button className="square__button square__button_delete square__button_row-delete"
                 style={this.state.countRow===1 ||
                     this.state.mouseOnTable===false ||
                     this.state.onDelCol===true ? {visibility: "hidden"} : {visibility: "visible"}} 
  
                 onClick={this.deleteRow}
  
                 onMouseOver={() =&gt; {clearTimeout(timeOut);
                      this.setState({onDelRow:true})}}
  
                 onMouseLeave={() =&gt; {this.setState({onDelRow:false})}}&gt;
               &lt;/button&gt;
  
  
  
      
  
     &lt;/div&gt;
  
  
    )
  
   }
  
  })
  
  
  //==================================================
  
  
  var Row = React.createClass({
  
  
  
   getInitialState: function(){
    return {
  
     cellTop: 0,
     cellLeft: 0,
  
    }
  
  
   },
  
  
  
   createCol: function() {
  
    var columns = [];
  
    for(let i = 0; i &lt; this.props.countCol; i++){
     columns.push(this.createCell)
    }
  
    return columns;
  
  
   },
  
  
  
   createRow: function (k) {
  
    return (
  
     &lt;tr key={k}&gt;
      {this.createCol().map(function(cell,key){
       return (
         cell(key)
        )
      })}
     &lt;/tr&gt;
    )
   },
  
  
  
   createCell: function(k){
  
    return (
  
     &lt;td key={k}&gt;
      &lt;div className="square__cell" onMouseOver={this.getMousePosition}&gt;&lt;/div&gt;
     &lt;/td&gt;
    )
  
   },
  
  
   getMousePosition: function(element){
  
    let coordinates = element.target.getBoundingClientRect();
    let top = coordinates.top;
    let left = coordinates.left;
    
    this.setState({
     cellTop: top,
     cellLeft: left
    })
  
  
   },
  
  
  
   render: function(){
  
     var lines = []
     for (let i = 0; i &lt; this.props.countRow; i++) {
     lines.push(this.createRow(i))
    }
  
  
    return (
  
     &lt;tbody&gt;  
      {lines}
     &lt;/tbody&gt;
    )
   }
  
  
  
  })</code></pre>
  </div>
  </div>
  </p>