React: TypeError: null is not an object (evaluating 'event.target.id')

Question

I'm trying to save form input into the state object.

const [newMovie, setNewMovie] = useState({
    name: "",
    ratings: "",
    duration: "",
  });

const handleChangeEvent = (event) => {
    console.log(event.target.value);
    setNewMovie((prevState) => {
      return { ...prevState, [event.target.id]: event.target.value };
    });
    console.log(newMovie);
  };

This is called for this form:

    <form onSubmit={handleFormSubmit}>
      <div className="layout-column mb-15">
        <label htmlFor="name" className="mb-3">
          Movie Name
        </label>
        <input
          type="text"
          id="name"
          placeholder="Enter Movie Name"
          data-testid="nameInput"
          value={newMovie.name}
          onChange={handleChangeEvent}
        />
      </div>
      <div className="layout-column mb-15">
        <label htmlFor="ratings" className="mb-3">
          Ratings
        </label>
        <input
          type="number"
          id="ratings"
          placeholder="Enter Rating on a scale of 1 to 100"
          data-testid="ratingsInput"
          value={newMovie.ratings}
          onChange={handleChangeEvent}
        />
      </div>
      <div className="layout-column mb-30">
        <label htmlFor="duration" className="mb-3">
          Duration
        </label>
        <input
          type="text"
          id="duration"
          placeholder="Enter duration in hours or minutes"
          data-testid="durationInput"
          value={newMovie.duration}
          onChange={handleChangeEvent}
        />
      </div>
    </form>

Issue is as soon as I start typing, right after the first word, React throws the error: "TypeError: null is not an object (evaluating 'event.target.id')" and a couple warnings pop up:

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?

Update 1

Logging the entire event.target shows that "id" parameter is present (as per my understanding):

Update 2

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 "myKey" is not used anywhere despite the fact that I'm literally using it inside the update state function.

Browser logs:

try console logging whole event.target inside the handler. and see if id null — cmgchess, Mar 09 '22 at 17:03
Logging the entire event.target shows that "id" parameter is present. — Ashar, Mar 09 '22 at 17:07
I think there might be a problem with the fact you capture a reference of the event inside the closure of setNewMovie, which may cause the reuse of the event. Maybe you could try to extract the key and the value before calling setNewMovie : `const key = event.target.id, value = event.target.value;` And then `setNewMovie((prevState) => { return { ...prevState, [key]: value } });`. Not sure the problem is from there but you could try... — Peterrabbit, Mar 09 '22 at 17:15
@Peterrabbit Please check my Update 2 to the post. Unfortunately this doesn't fix the problem. — Ashar, Mar 09 '22 at 17:25
@Ashar, does my answer explain the issue and propose a path to fix it? I mean, can you confirm that that is the actual issue? — Emanuele Scarabattoli, Mar 09 '22 at 17:26
This will not solve the problem more than this but you didn't put the brackets to resolve the key name in `return {...prevState, [myKey]: myValue}` — Peterrabbit, Mar 09 '22 at 17:28
@EmanueleScarabattoli Please check my reply against your answer. Thanks! — Ashar, Mar 09 '22 at 17:28
@Peterrabbit: Miraculously putting the brackets fixed the problem. Thank you so much! — Ashar, Mar 09 '22 at 17:30
Glad to hear that. Also the question asked here is pretty much the same (and seemd solved the same way) https://stackoverflow.com/questions/49500255/warning-this-synthetic-event-is-reused-for-performance-reasons-happening-with — Peterrabbit, Mar 09 '22 at 17:30

React: TypeError: null is not an object (evaluating 'event.target.id')

0 Answers0