Change state of a parent from the child in ReactJs -

supposing have parent component.

parent.jsx

render() {     const headers = ["id","desc1", "desc2", "actions"];     return(         <div>             <input type = "text" placeholder = "product brand" value={ this.state.desc }/>             <input type = "text" placeholder = "product brand" value={ this.state.desc2 }/>             <button type = "button" onclick = { this.handlesubmit.bind(this) }>add</button>              <customtable mystate = { this.state } header = { headers } data = { this.props.store.productbrandlist }/>         </div>     ) } 

and customtable.jsx

renderheaders(){     return(         this.props.header.map(function(header, index){             return <th key={index}>{header}</th>         })     ) }  renderrows(){     // console.log("here1");     // return(     //  <listitem datarows = { this.props.data }/>     // )     return this.props.data.map((list, id) => <listitem mystate = {this.props.mystate} key_id={id} key={id} col = {list}/> ) }  render(){     return(         <table classname="table">             <thead>                 <tr>{ this.renderheaders() }</tr>             </thead>             <tbody>                 { this.renderrows() }             </tbody>         </table>     ) } 

and component render rows of table

render(){      return(         <tr key = { this.props.key_id }>             { this.rendercolumns() }             { this.renderactions() }         </tr>     ) } rendercolumns(){     var columns = []     (var key in this.props.col)     {         if (this.state.isediting){             columns.push(<td key = {key.id}><input ref = "txt" type = "text" value = { this.state.itemvalue } onchange = { this.ontextchange.bind(this) } /></td>)         }         else         {             columns.push(<td key = {key.id}>{ this.props.col[key] }</td>)             // this.setstate({             //  itemvalue: key,             //  isediting: false             // })          }      }     return columns }  renderactions(){     if (this.state.isediting){         return (             <td>                 <button type="button" onclick = { this.handlesaveclick.bind(this) }>save</button>                 <button type="button" onclick = { this.handlcancelclick.bind(this) }>cancel</button>             </td>         )     }      return(         <td>             <button type="button" onclick = { this.handleeditclick.bind(this) }>edit</button>             <button type="button" onclick = { this.handledeleteclick.bind(this) }>delete</button>         </td>     ) } 

my question how configure in such way when click on button edit created in listitem component. data displayed in inputbox created in parent.jsx

looking @ code, need pass reference parent method desired child, through props. don't have full code, not tested, should give idea on how it.

if there child layer between parent , listitem, encourage using redux. i'm ok passing references 2 levels deep using props simple projects.

to listitem values show in parent input fields, make following changes:

in parent:

// need two-way data binding between state , input values onchange(){     this.setstate({       desc: this.refs.desc1.value,       desc2: this.refs.desc2.value     }); }  // method triggered listitem's edit button onclick onrowedit(desc1, desc2){     this.setstate({       desc: desc1,       desc2: desc2     }); }  render() {         const headers = ["id","desc1", "desc2", "actions"];         return(             <div>                 <input ref="desc1" type = "text" placeholder = "product brand" value={ this.state.desc } onchange={this.onchange.bind(this)} />                 <input ref="desc2" type = "text" placeholder = "product brand" value={ this.state.desc2 } onchange={this.onchange.bind(this)/>                 <button type = "button" onclick = { this.handlesubmit.bind(this) }>add</button>                  <customtable onedit={ this.onrowedit } mystate = { this.state } header = { headers } data = { this.props.store.productbrandlist }/>             </div>         )     } 

your custom table renderrows:

renderrows(){     // console.log("here1");     // return(     //  <listitem datarows = { this.props.data }/>     // )     return this.props.data.map((list, id) => <listitem onedit={this.props.onedit} mystate = {this.props.mystate} key_id={id} key={id} col = {list}/> ) } 

finally in listitem inside handleeditclick method call function passed in props:

handleeditclick(){   // const desc1 = ...    // const desc2 = ...   this.props.onedit(desc1, desc2); // call cause desc1, desc2 values show in parent's input fields. }