InputText component results in TypeError: e.target is null when typing into text box (PrimeReact library, using arrow function)

Question

I'm using PrimeReact and I have a datatable of persons:

When selecting any row, a sub panel is shown having dropdowns, check boxes and text inputs:

Text input code:

<div className="p-col-4">
    <InputText id="first-name"
               value={this.state.selectedEntity.firstName}
               onChange={(e) => this.setState(state => (state.selectedEntity.firstName = e.target.value))} />
</div>

I keep the state of the first name on a nested property called selectedEntity. That's about the only non-straightforward construct here in the setState call. However, this gives me an error in the browser as soon as I type:

QUESTION(S):

What's wrong?

Is this a bug in PrimeReact?

I'm using PrimeReact 5.0.0-rc2.

---

EDIT 1:

BTW the dropdown and check box you see there, they seem to work with an arrow function. Similar code:

Dropdown:

<div className="p-col-4">
    <Dropdown optionLabel="name"
              optionValue="gender"
              value={this.state.selectedEntity.gender}
              options={[{"gender": "MALE", "name": "Mr"}, {"gender": "FEMALE", "name": "Mrs"}]}
              onChange={(e) => this.setState(state => (state.selectedEntity.gender = e.value))}
              placeholder="Select a gender" />
</div>

Check box:

<div className="p-col-4">
    <Checkbox inputId="incognito"
              value="Incognito"
              checked={this.state.selectedEntity.incognito}
              onChange={(e) => this.setState(state => (state.selectedEntity.incognito = e.checked))} />
</div>

---

EDIT 2:

I've created a test case here:

https://codesandbox.io/s/primereact-test-forked-4blln?file=/src/index.js

Looks like a bug to me...

Answer 1

For the InputText's onChange event handler to accept an arrow function of the given form, you must also use e.persist() prior to setState( ... ):

So instead of

onChange={(e) =>
   this.setState((state) => (state.selectedEntity.firstName = e.target.value))
}

use

onChange={(e) => {
   e.persist();
   this.setState((state) => (state.selectedEntity.firstName = e.target.value))
}}

Please see

github.com/primefaces/primereact/issues/1600

for the complete discussion.

PS: at the time of this writing, the answer as to why this isn't needed for the Dropdown and Checkbox components is still pending.