Return to Answer

Active reading [<https://en.wikipedia.org/wiki/JSFiddle>].

edited May 21, 2021 at 15:13

31.4k
22
110
134

I found the following working solution to pass the onClick function argument from the child to the parent component:

//ChildB component class ChildB extends React.Component { render() {   var handleToUpdate  =  this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}> Push me </button> </div>) } } //ParentA component class ParentA extends React.Component {   constructor(props) { super(props); var handleToUpdate  = this.handleToUpdate.bind(this); var arg1 = ''; } handleToUpdate(someArg){   alert('We pass argument from Child to Parent: ' + someArg);   this.setState({arg1:someArg}); } render() { var handleToUpdate  =  this.handleToUpdate;   return (<div> <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFIDDLEJSFiddle

//ChildB component class ChildB extends React.Component { render() {   var handleToUpdate  =  this.props.handleToUpdate; return (<div> <button onClick={() => handleToUpdate('someVar')}> Push me </button> </div>) } } //ParentA component class ParentA extends React.Component {  constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFIDDLEJSFiddle

I found the following working solution to pass onClick function argument from child to the parent component:

//ChildB component class ChildB extends React.Component { render() {   var handleToUpdate  =  this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}> Push me </button> </div>) } } //ParentA component class ParentA extends React.Component {   constructor(props) { super(props); var handleToUpdate  = this.handleToUpdate.bind(this); var arg1 = ''; } handleToUpdate(someArg){   alert('We pass argument from Child to Parent: ' + someArg);   this.setState({arg1:someArg}); } render() { var handleToUpdate  =  this.handleToUpdate;   return (<div> <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFIDDLE

//ChildB component class ChildB extends React.Component { render() {   var handleToUpdate  =  this.props.handleToUpdate; return (<div> <button onClick={() => handleToUpdate('someVar')}> Push me </button> </div>) } } //ParentA component class ParentA extends React.Component {  constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFIDDLE

I found the following working solution to pass the onClick function argument from the child to the parent component:

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}> Push me </button> </div>) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); var handleToUpdate = this.handleToUpdate.bind(this); var arg1 = ''; } handleToUpdate(someArg){ alert('We pass argument from Child to Parent: ' + someArg); this.setState({arg1:someArg}); } render() { var handleToUpdate = this.handleToUpdate; return (<div> <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFiddle

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div> <button onClick={() => handleToUpdate('someVar')}> Push me </button> </div>) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFiddle

beautified formatting

Source Link

edited Dec 10, 2018 at 17:27

Roman

22.3k
18
103
105

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}>Push>  me</button>< Push me </div>button> </div>) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); var handleToUpdate = this.handleToUpdate.bind(this); var arg1 = ''; } handleToUpdate(someArg){ alert('We pass argument from Child to Parent: ' + someArg); this.setState({arg1:someArg}); } render() { var handleToUpdate = this.handleToUpdate; return (<div> <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button<div>  <button onClick={() => handleToUpdate('someVar')}>Push>  me</button>< Push me </div>button> </div>) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div> ) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); var handleToUpdate = this.handleToUpdate.bind(this); var arg1 = ''; } handleToUpdate(someArg){ alert('We pass argument from Child to Parent: ' + someArg); this.setState({arg1:someArg}); } render() { var handleToUpdate = this.handleToUpdate; return (<div> <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div> ) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}>   Push me </button> </div>) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); var handleToUpdate = this.handleToUpdate.bind(this); var arg1 = ''; } handleToUpdate(someArg){ alert('We pass argument from Child to Parent: ' + someArg); this.setState({arg1:someArg}); } render() { var handleToUpdate = this.handleToUpdate; return (<div> <ChildB handleToUpdate = {handleToUpdate.bind(this)} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div>  <button onClick={() => handleToUpdate('someVar')}>   Push me </button> </div>) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Extending the answer

Source Link

edited Jul 5, 2018 at 14:24

Roman

22.3k
18
103
105

Version with passing a method()

Look at JSFIDDLE

Version with passing an Arrow function

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div> ) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFIDDLE

Version with passing a method()

Look at JSFIDDLE

Version with passing an Arrow function

//ChildB component class ChildB extends React.Component { render() { var handleToUpdate = this.props.handleToUpdate; return (<div><button onClick={() => handleToUpdate('someVar')}>Push me</button></div> ) } } //ParentA component class ParentA extends React.Component { constructor(props) { super(props); } handleToUpdate = (someArg) => { alert('We pass argument from Child to Parent: ' + someArg); } render() { return (<div> <ChildB handleToUpdate = {this.handleToUpdate} /></div>) } } if(document.querySelector("#demo")){ ReactDOM.render( <ParentA />, document.querySelector("#demo") ); }

Look at JSFIDDLE