Send data from child to parent React - reactjs

Question

I don`t know where i do wrong.I cant send data from child to parent.
What is wrong here?
How can i grab the state from child and send to parent state?
this is the child component
import React from 'react';
export class Child extends React.Component{
constructor(props) {
super(props);
this.state= {
counter2: 5
}
}
render() {
return(
<div>
<button onClick={this.props.data}>Click me</button><span>{this.state.counter2}</span>
</div>
);
}
}
export default Child;
and i want to update the state in parent component
import React from 'react';
import {Child} from './Child';
export default class Parent extends React.Component{
constructor(props){
super(props);
this.state= {
counter: 0
}
}
update(){
this.setState({
counter: this.props.state.counter2
});
}
render(){
return(
<div>
<span>{this.state.counter}</span>
<Child data={this.update.bind(this)}/>
</div>
);
}
}
but i have a error:
×
TypeError: Cannot read property 'counter' of undefined?
i cant understand what i do wrong!
Thank you

Answer 1

Actually, you don't have state property in your Parent's props.
You can't get child's state in a such way:
this.props.state.counter2
Props ONLY passed from parent component to child (if you don't use Redux or another state management library).
Nevertheless, you can pass it like this:
Parent component
import React from 'react';
import {Child} from './Child';
export default class Parent extends React.Component{
constructor(props){
super(props);
this.state= {
counter: 0
}
}
update(value){
return () => {
this.setState({
counter: value
});
}
}
render(){
return(
<div>
<span>{this.state.counter}</span>
<Child data={this.update.bind(this)}/>
</div>
);
}
}
Child component
import React from 'react';
export class Child extends React.Component{
constructor(props) {
super(props);
this.state= {
counter2: 5
}
}
render() {
return(
<div>
<button onClick={this.props.data(this.state.counter2)}>Click me</button><span>{this.state.counter2}</span>
</div>
);
}
}
export default Child;

Answer 2

You are not passing content2 state in the child component correctly
You need to pass it with the button
<button onClick={()=> this.props.data(this.state.counter2)}>Click me</button><span>{this.state.counter2}</span>
Then in your update function
update = (data) =>{
this.setState({
counter: data
});
}
Note: no need to bind update function if you are using arrow function
like me.
<div>
<span>{this.state.counter}</span>
<Child data={this.update)}/>
</div>