TypeError: Cannot read property 'value' of null in React Form

Question

I'm working on a form where I have an HTML input that just takes numbers or letters. The short form of my state interface is the following:

interface State {
    location: string;
    startDate: Date;
}

I initialize my state like this:

const [state, setState] = useState<State>({
        location: '',
        startDate: new Date(),
    });

My onChangeHandler is the following:

const handleChangeLocation = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
        setState(prevState =>
            update(prevState, {
                location: {$set: event.target.value},
            })
        );
    }, []);

The HTML input is this:

<input id="search-grid-location" className="search-grid-element" type="text"
                           placeholder="Location"
                           onChange={handleChangeLocation}/>

When I write i. e. 1 in the input there is no error but when I write 2, after the first input, the error occurs. The input field contains 12

The error occurs at the location line. See the

I debugged the application and the event.target.value holds the input values. So there might be an error with the prevState variable. I use functional components.

I use to update my state the immutability-helper package. Link

Answer 1

Before you call setState you're going to want to grab the value of event.target.value. By the time setState is executed (especially since you're using functional setState), the React SyntheticEvent will have been cleared, so it's target property will be null.

useCallback((event: ChangeEvent<HTMLInputElement>): void => {
  // do this and your error will go away
  const {value} = event.target;
  setState(prevState =>
    update(prevState, {
      location: {$set: value},
    })
  );
}, []);

read more about the SyntheticEvent