What am I doing wrong when overwriting state?

Question

JavaScript

Hello, why is the state not overwritten with a new one and what errors and bad practices do you see in my code?

class Li extends React.Component {
  render() {
    return (
      <li>{this.props.text}</li>
    )
  }
}

class Elem extends React.Component {
  render() {
    return (<div className="element">
      <ul>
        <Li text={this.props.text}/>
      </ul>
    </div>)
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {text: 'hello world'};
  }
  render() {
    return (
      <div className="pageWrapper">
        <h1>To Do List</h1>
        <input placeholder="Введите текст" onChange={this.submitText} type="text" className="inp"/>
        <Elem text={this.state.text}/>
      </div>
    )
  }
  submitText() {
    let inpValue = document.querySelector(".inp").value;
    this.setState({
      text: inpValue
    });
  }
}

ReactDOM.render(<App />, document.querySelector("#app"));

Answer 1

The context is lost. Well, you don't have to try to reach the element through the querySelector - it is available as the target property of the event object.

submitText = (e) => {
  this.setState({
    text: e.target.value,
  });
}