Me deparam com um problema bastante tolo. Estou no processo de criação do meu primeiro aplicativo React e encontrei um pequeno problema, onde não consigo limpar meu valor de entrada depois de enviar um formulário. A tentei pesquisar no Google esse problema, encontrei alguns tópicos semelhantes aqui, mas não consegui resolver isso. NÃO quero alterar o estado do meu componente / aplicativo, apenas para alterar o valor da entrada para uma string vazia. Tentei limpar o valor da entrada no meuonHandleSubmit() função, mas recebi um erro:

"Não foi possível definir a propriedade 'valor' de indefinido".

Meu componente SearchBar:

import React, { Component } from "react";

class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: ""
    };

    this.onHandleChange = this.onHandleChange.bind(this);
    this.onHandleSubmit = this.onHandleSubmit.bind(this);
  }

  render() {
    return (
      <form>
        <input
          id="mainInput"
          onChange={this.onHandleChange}
          placeholder="Get current weather..."
          value={this.state.city}
          type="text"
        />
        <button onClick={this.onHandleSubmit} type="submit">
          Search!
        </button>
      </form>
    );
  }

  onHandleChange(e) {
    this.setState({
      city: e.target.value
    });
  }

  onHandleSubmit(e) {
    e.preventDefault();
    const city = this.state.city;
    this.props.onSearchTermChange(city);
    this.mainInput.value = "";
  }
}

export default SearchBar;