0

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

enter image description here

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

enter image description here

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:

enter image description here

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...

Kawu
  • 13,647
  • 34
  • 123
  • 195
  • Can you share the `InputText` component? (Also, are you ok having these names in the screenshot? Maybe you want to hide the names before sharing on internet?) – Hugo Sep 29 '20 at 08:38
  • The `InputText` component is from PrimeReact... and yes I will replace the images with fake data. – Kawu Sep 29 '20 at 09:06
  • Maybe the error occurs on render when the target is not "ready yet". Maybe adding a if (e.target) { } around the `this.setState()` could be a quick fix? – Hugo Sep 29 '20 at 09:09
  • The arrow function works for the `DropDown` and the `Checkbox` component. See edit. – Kawu Sep 29 '20 at 09:16
  • You are using an RC version... expect bugs. Does it work if you use a non-RC version? – Ian Kemp Sep 29 '20 at 09:41
  • 1
    Also happens with stable 4.2.2... looks like a bug to me -> https://github.com/primefaces/primereact/issues/1600 – Kawu Sep 29 '20 at 10:23
  • @Kawu please self-answer this question with the information that this is a known bug, including that link, to help future people with the same issue. – Ian Kemp Sep 29 '20 at 10:59

1 Answers1

0

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.

Kawu
  • 13,647
  • 34
  • 123
  • 195