pass input value automatically to h1 in reactjs

Question

I am new to learning React. I need: entered text into the input to be automatically written in the H1 in screen.js file

Screen.js

export default function Screen(props){
    return (
      <div className="screen">
      <h1></h1>
    </div>
    );
  }
export default Screen;

Inputs.js

class Inputs extends React.Component {
  render() {
    return (
      <form>
        <input type="text" onChange={(e) => this.setState({ inputText: e.target.value })}/>
        <button type="button" onClick={() =>this.props.onAdd({inputText: this.state.inputText,})}>Send</button>
      </form>
    );
  }}
  export default Inputs;

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputText: '' };
    this.changeText = this.changeText.bind(this)
  }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <p>Start editing to see some magic happen :)</p>
        <Inputs onAdd={this.changeText} />
        <Screen onSave={this.changeText}/>
      </div>
    );
  }
  changeText(text){
    console.log(text)
  }
}
export default App;

Answer 1

export default function Screen(props){
    return (
      <div className="screen">
      <h1>{props.text}</h1>
    </div>
    );
  }
export default Screen;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { inputText: '' };
    this.changeText = this.changeText.bind(this)
  }
  render() {
    return (
      <div>
        <h1>Hello world!</h1>
        <p>Start editing to see some magic happen :)</p>
        <Inputs onAdd={this.changeText} />
        <Screen text={this.state.inputText} onSave={this.changeText}/>
      </div>
    );
  }
  changeText(text){
    this.setState({ inputText: text })
  }
}
export default App;