How to pass input data from one class to another

I'm trying to pass the data from one class to another and displayed it in main class i.e user write something in input field(Component A) and at the same time data or input value is display in another component(Component B) and both work is displayed by Component C. But I can't figure out what's wrong with my code. Below is my dummy code but the actual code is the same as below.

class A extends React.Component {
    constructor(props) {
        super()
    }
    render() {
        return (
            <input name="firstName" placeholder="Enter name" />
        )
    }
}

class B extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <h1> "Display data here from input of class A " </h1>
        )
    }
}

class C extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
                <A />
                <B />
            </div>
        )
    }
}

ReactDOM.render(<C />, document.getElementById("root"))

Comments

[Nans Dumortier]

In this case, you need B to receive data. The only parent B has is C. Here you are lucky, C is also the direct parent of A. So you need C to hold the data that is inside A. Then, C can give this information to B as a "props", that B can display.
In order to enable A to update C's state, you need C to pass the correct function that A will invoke in order to update C, here it's saveData (poorly named by the way, sorry about that !)

class A extends React.Component {
    constructor(props) {
        super()
    }
    render() {
        return (
            <input name="firstName" placeholder="Enter name" onChange={this.props.saveData}/>
        )
    }
}

class B extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <h1> "Display data here from input of class A : {this.props.value}" </h1>
        )
    }
}

class C extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
          value: ''
        }
    }
    saveData = (event) => {
      this.setState({
        value: event.target.value
      })
    }
    render() {
        return (
            <div>
                <A saveData={this.saveData} />
                <B value={this.state.value}/>
            </div>
        )
    }
}

render(<C />, document.getElementById("root"))

Does this solultion work for you ? :)
You can edit the code and see it running here

[Rushi]

Yes, that's work. Thank you for the info.👍😃