Почему не работает React компонент?

Question

[Evtera]

Здравствуйте. Начал изучать Реакт. Столкнулся с небольшой ошибкой. Нужно, чтобы при вводе данных в Input, менялся заголовок, который находится в другом компоненте, но этого не происходит. Не понимаю, почему так.

Здесь выводим заголовок

import React from "react";
import "./App.scss";
import Input from "../Input/Input.js";

class App extends React.Component {
  state = {
    title: "hello",
  };

  render() {
    return (
      <div className="container">
        <h1 className="title">{this.state.title}</h1>
        <Input />
      </div>
    );
  }
}

export default App;

здесь вводим Input

import React from "react";
import "./Input.scss";

class Input extends React.Component {
  handleInput = (event) => {
    this.setState({
      title: event.target.value,
    });
  
  };

  render() {
    return (
      <div className="fieldWrapper">
        <input onChange={this.handleInput} className="fieldWrapper__textArea"></input>
      </div>
    );
  }
}

export default Input;

Answer 1

[0xD34F]

Обновляете стейт дочернего компонента вместо родительского.

Надо перенести метод handleInput в родительский компонент и передавать в дочерний:

<Input handleInput={this.handleInput} />

В дочернем, соответственно, доставать его не непосредственно из текущего экземпляра, а из props:

onChange={this.props.handleInput}