Using Onchange in JSX (React)

Question

I'm implementing contact-form functionality into a bigger project. The form works fine separately, though it's written in JS (you can find it here. My bigger project is however, set up in JSX, where I get an error as soon as I type into an input-field. The error points at line 22 of the code, saying the respective field is null. When I log the value it is, indeed, not retrieving anything from what has been added. Here is the code snippet of where it happens:

const [mailerState, setMailerState] = useState({
    name: "",
    email: "",
    message: "",
  });

  const captchaRef = useRef(null);
  
  function handleStateChange(e) {
    setMailerState((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value, <<<< The error codes points here >>>>
    }));
    console.log(mailerState);
  }

my input fields look like this:

<input
           placeholder="Name"
           onChange={handleStateChange}
           name="name"
           value={mailerState.name}
         />

Error message:

Uncaught TypeError: Cannot read properties of null (reading 'name')
    at Kontakt.jsx:22:1
    at basicStateReducer (react-dom.development.js:15013:1)
    at updateReducer (react-dom.development.js:15135:1)
    at updateState (react-dom.development.js:15237:1)
    at Object.useState (react-dom.development.js:15949:1)
    at useState (react.development.js:1497:1)
    at Kontakt (Kontakt.jsx:11:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at updateFunctionComponent (react-dom.development.js:17034:1)
    at beginWork (react-dom.development.js:18610:1)

I suspect JSX wants this handled a little differently. I've also tried onBlur but get the same results. I'm still learning the finer details of using JSX, so would appreciate any help and pointers. Many thanks!

I've whittled it down to a skeleton for GitHub. The issue still happens for me, but bare in mind the message will not send like this. The full Kontakt.jsx is here, and the rest of the React-setup is along with it.

your code seems like it should work. can you provide a [mre] maybe on [codesandbox](https://codesandbox.io) — nullptr, Sep 05 '22 at 10:02
I try to reproduce it and the above code is working fine please add more code or host your project code if possible. — Alpha, Sep 05 '22 at 10:06
@RonnyEfronny the console.log I do at the end of the `handleStateChang` function results in `{name: '', email: '', message: ''}`. To me, this means it's not registering the changes. Indeed the page goes blank within a second or two of typing into a field. — atschpe, Sep 05 '22 at 11:19
That's not what I asked. State changes only happen when the scope that called them ends, by default. Put your `console.log` outside of `handleStateChange` to see the change on re-render. What I ask is that you `console.log` the `e` to see what is actually in it. — Ronny Efronny, Sep 05 '22 at 11:24
@RonnyEfronny, ah sorry. There are so many "e"s running around I wasn't quite following. I'm adding the output to the original question as it's quite a lot … — atschpe, Sep 05 '22 at 11:43
Still not what I'm looking for. You function `handleStateChange` receives `e` (for `event`). Print this `e` to see if the field that you're trying to get (which is crashing the app) exists. — Ronny Efronny, Sep 05 '22 at 11:48
@RonnyEfronny, caught that just now (I was a little too fast when adjusting the code). See above — atschpe, Sep 05 '22 at 11:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247792/discussion-between-ronny-efronny-and-atschpe). — Ronny Efronny, Sep 05 '22 at 11:54

Ronny Efronny · Accepted Answer · 2022-09-05T13:37:30.157

After seeing the example and discussing the output it seems the issue stems from the fact that you're using React and are getting a synthetic event which sometimes has an odd behavior.

I am by no means an expert, but I think this answer is all you need to know in order to get this code to work properly. Alternatively as per the warning you get, you could try to call e.persist(), though I am not sure if this could cause other issues.

Should probably also read up on synthetic events to understand what's going on.

Using Onchange in JSX (React)

1 Answers1