Невозможно изменить значение или заполнитель HTML-форм

Question

Я создаю это приложение с реакцией, когда передаю фактическое значение, например

<div class="form-group">
    <input 
       value={this.state.setupList[0]} onChange{this.handleChange}
       name="date" class="form-control"  placeholder={this.state.setupList[0]} />
</div>

. Я вижу текст, но изменения не допускаются, это функция, которую я использую для формы:

handleChange(e) {
  this.setState({ [e.target.name]: e.target.value });
}

Пожалуйста, кто-нибудь предложит лучший подход для решения проблемы

Структура конструктора

constructor(props) {
  super(props);
  this.handleChange = this.handleChange.bind(this);
  this.state = {
    setupList: [],
    title: '',
    description: '',
    show: false,
  };
}

Случайная функция, которую я нашел в интернете для хранения ввода в значении

handleChange(e) {
  this.setState({ [e.target.name]: e.target.value });
}

С этим я обновляю db

updateData = e => {
    this.setState({ loading: true})
    const { currentUser } = fire.auth();
    e.preventDefault();
    let title = this.state.title;
    let description = this.state.description;
    fire.database().ref(`/master/${currentUser.uid}/setup/`)
    .update({
      title: this.state.title,
      description: this.state.description,
    })
    .then(() => {
    this.setState({ loading: false, show:false})
  });
}

И, вероятно, проблема здесь

componentDidMount = () => {
  fire.database().ref(`/master/${currentUser.uid}/setup/`)
  .on('value', snapshot => {
  var obj = snapshot.val()
  var setupList = []
  var keys = []
  for(let a in obj){
      setupList.push(obj[a])
      keys.push(a)
  }
   this.setState({
  setupList:setupList,
  keys:keys,

  ...

Answer 1

Изменение value на defaultValue работает как положено.Такое простое решение

<div class="form-group">
    <input 
       defaultValue={this.state.setupList[0]} onChange{this.handleChange}
       name="date" class="form-control" placeholder={this.state.setupList[0]} />
</div>