title: React - Input fields not editable even after I set the state
body: <p>I am trying to type on the inputs but it is not allowing me too. My state changes but it doesn't show.
  I am using props to show an event OR and empty event if there is no props (no event selected). </p>
  
  <p>Im sorry but Stack is telling me to add more details but I don't know what else to add, I already described my problem</p>
  
  <pre><code>class EventForm extends PureComponent {
      state = {
      event: this.props.selectedEvt,
      query: ""
  };
  
  onFormSubmit = e =&gt; {
      e.preventDefault();
      this.props.addEvent(this.state.event);
  };
  
  onInputChange = evt =&gt; {
      console.log(evt);
      evt.persist();
      let newEvt = this.state.event;
      newEvt[evt.target.name] = evt.target.value;
      this.setState({
      event: newEvt
      });
  };
  
  componentDidUpdate(prevProps) {
      this.props.selectedEvt &amp;&amp;
      this.setState({
          event: this.props.selectedEvt
      });
  }
  
  render() {
      const { event } = this.state;
      return (
      &lt;form className="card" onSubmit={this.onFormSubmit}&gt;
          &lt;div className="form-row card-body"&gt;
          &lt;div className="form-group col-md-12"&gt;
              &lt;label hmtlfor="inputName"&gt;Event Name&lt;/label&gt;
              &lt;input
              name="title"
              type="text"
              className="form-control"
              id="inputEventName"
              onChange={this.onInputChange}
              value={event.title}
              /&gt;
  
              &lt;label hmtlfor="inputDate"&gt;Event Date&lt;/label&gt;
              &lt;input
              name="date"
              type="date"
              className="form-control"
              id="inputEventDate"
              onChange={this.onInputChange}
              value={event.date}
              /&gt;
  
              &lt;label hmtlfor="inputDate"&gt;Event Time&lt;/label&gt;
              &lt;input
              name="time"
              type="time"
              className="form-control"
              id="inputEventTime"
              onChange={this.onInputChange}
              value={event.time}
              /&gt;
  
              &lt;label hmtlfor="inputAddress"&gt;Address&lt;/label&gt;
              &lt;input
              name="address"
              type="text"
              className="form-control"
              id="autocomplete"
              onChange={this.onInputChange}
              value={event.address}
              autoComplete="new-password"
              /&gt;
  
              &lt;label hmtlfor="inputHost"&gt;Hosted By&lt;/label&gt;
              &lt;input
              name="host"
              type="text"
              className="form-control"
              id="inputHost"
              onChange={this.onInputChange}
              value={event.host}
              /&gt;
  
              &lt;label hmtlfor="inputDesc"&gt;Description&lt;/label&gt;
              &lt;textarea
              name="desc"
              className="form-control"
              rows="5"
              id="inputDesc"
              wrap="soft"
              onChange={this.onInputChange}
              value={event.description}
              /&gt;
  
              &lt;button type="submit" className="btn btn-primary mt-2"&gt;
              Submit
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
      );
  }
  }
  
  export default EventForm;
  </code></pre>