title: React: TypeError: null is not an object (evaluating 'event.target.id')
body: <p>I'm trying to save form input into the state object.</p>
  <pre><code>const [newMovie, setNewMovie] = useState({
      name: &quot;&quot;,
      ratings: &quot;&quot;,
      duration: &quot;&quot;,
    });
  
  const handleChangeEvent = (event) =&gt; {
      console.log(event.target.value);
      setNewMovie((prevState) =&gt; {
        return { ...prevState, [event.target.id]: event.target.value };
      });
      console.log(newMovie);
    };
  </code></pre>
  <p>This is called for this form:</p>
  <pre><code>    &lt;form onSubmit={handleFormSubmit}&gt;
        &lt;div className=&quot;layout-column mb-15&quot;&gt;
          &lt;label htmlFor=&quot;name&quot; className=&quot;mb-3&quot;&gt;
            Movie Name
          &lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            id=&quot;name&quot;
            placeholder=&quot;Enter Movie Name&quot;
            data-testid=&quot;nameInput&quot;
            value={newMovie.name}
            onChange={handleChangeEvent}
          /&gt;
        &lt;/div&gt;
        &lt;div className=&quot;layout-column mb-15&quot;&gt;
          &lt;label htmlFor=&quot;ratings&quot; className=&quot;mb-3&quot;&gt;
            Ratings
          &lt;/label&gt;
          &lt;input
            type=&quot;number&quot;
            id=&quot;ratings&quot;
            placeholder=&quot;Enter Rating on a scale of 1 to 100&quot;
            data-testid=&quot;ratingsInput&quot;
            value={newMovie.ratings}
            onChange={handleChangeEvent}
          /&gt;
        &lt;/div&gt;
        &lt;div className=&quot;layout-column mb-30&quot;&gt;
          &lt;label htmlFor=&quot;duration&quot; className=&quot;mb-3&quot;&gt;
            Duration
          &lt;/label&gt;
          &lt;input
            type=&quot;text&quot;
            id=&quot;duration&quot;
            placeholder=&quot;Enter duration in hours or minutes&quot;
            data-testid=&quot;durationInput&quot;
            value={newMovie.duration}
            onChange={handleChangeEvent}
          /&gt;
        &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  <p>Issue is as soon as I start typing, right after the first word, React throws the error: &quot;TypeError: null is not an object (evaluating 'event.target.id')&quot; and a couple warnings pop up:</p>
  <p><a href="https://i.stack.imgur.com/BeC1s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BeC1s.png" alt="enter image description here" /></a></p>
  <p>The exact error is as follows. I'm not sure why this is happening because the id parameter is clearly defined in the form. Can anyone help me fix this problem?</p>
  <p><a href="https://i.stack.imgur.com/yScXv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yScXv.png" alt="enter image description here" /></a></p>
  <p><strong>Update 1</strong></p>
  <p>Logging the entire event.target shows that &quot;id&quot; parameter is present (as per my understanding):</p>
  <p><a href="https://i.stack.imgur.com/wATKE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wATKE.png" alt="enter image description here" /></a></p>
  <p><strong>Update 2</strong></p>
  <p>Tried extracting the keys and value prior to calling the set state function but now I'm unable to enter anything in the input fields. Please note: It says that &quot;myKey&quot; is not used anywhere despite the fact that I'm literally using it inside the update state function.</p>
  <p>Browser logs:</p>
  <p><a href="https://i.stack.imgur.com/xrUDX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xrUDX.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/vTFP7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vTFP7.png" alt="enter image description here" /></a></p>