React : How to pass values from grandchild through child to parent?

Question

I have a parent,child and grandchild component. I have different input fields and want to pass the values from grandchild to child to parent where eventually i set the state with the values. I havent included all of my code, but doing it like that is necessary because of other things in my code, which I didnt include in this post as its irrelevant. Im not sure how to do that and tried to implement what I found online, however, its not working. Any ideas? Thanks!!

class Parent extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
        input: {}
    };
    this.changeName = this.changeName.bind(this);
    this.handleInput = this.handleInput.bind(this);
}

changeName(newName) {
    this.setState({
        name: newName
    });
}
handleInput() {
    console.log("helloooooo", this.state.name)
}

render() {
    return (
        <div>
            <Child onChange={this.changeName} onClick={this.handleInput}/>
        </div>
    )
}
}

class Child extends React.Component {

 constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleInput2 = this.handleInput2.bind(this);
}

handleChange(e) {
    this.props.handleChange(e);
}

handleInput2() {
    this.props.onClick()
}

render() {
    return (
        <div>
            <GrandChild onChange={this.handleChange}/>
            <input type="submit" onClick={this.handleInput2}/>
        </div>
        )
}
}

class GrandChild extends React.Component {

 constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleInput2 = this.handleInput2.bind(this);
}

handleChange(e) {
    const input = this.props.input;
    input[name] = e.target.value;
}

render() {
    return (
        <div>
            <input name="firstname" onChange={this.handleChange}/>
            <input name="lastname" onChange={this.handleChange}/>
        </div>
    )
}

Answer 1

In real life everything is easier. For every component you answer following questions.

What data the component will receive? Does it emit any event?

That's the props of the component.

So no matter how the relationship between your components is... Just answer those questions and you will be good.

Example:

I have a TodoList that contains a list of TodoItem elements. (Parent)

I have a TodoItem that displays the content of the TodoItem. (Child)

I have a Checkbox that displays a check box. (GrandChild)

a CheckBox receives a boolean saying isSelected and emit and event onChange . That's all what I know.

a TodoItem receives a Todo and emit onChange . That's all I care.

When you put everything together, TodoList has a todos , and pass todos[i] to its child and todos[i].isSelected to its grandchild, but that is what you don't need to care about. All what you care is:

What data the component will receive? Does it emit any event?

At the component level.