How to pass the "event" object to the functional version of "this.setState()"? [duplicate]

Question

so I'm using the functional form of this.setState() where you pass a function that returns an object.

But when I try to bind the onChange on an input and do this ...

onInputChange = event => {
    this.setState(() => ({
        ...this.state,
        [event.target.name]: event.target.value
    }));
};

It throws an error saying that Cannot read property 'name' of null obviously the problem is in the event object, so how can I pass the event object to this.setState() ?

I tried this but it didn't work ...

onInputChange = event => {
    this.setState((prevState, event) => ({
        ...this.state,
        [event.target.name]: event.target.value,
    }));
};

However the only thing that worked for me was doing it like this ...

onInputChange = e => {
    const { name, value } = e.target;
    this.setState(() => ({
        ...this.state,
        [name]: value
    }));
};

But I doubt that this is the right way to dot it.

Your working solution looks good to me, I'd just go with that. The reason the previous example doesn't work is because the functional setState signature receives the previous state and current props as arguments, not the change event as you have it here. — James
– James, Commented Aug 11, 2018 at 17:05
Also you need to persist the event event.persist() otherwise it will be full of null values -> reactjs.org/docs/events.html — James
– James, Commented Aug 11, 2018 at 17:13
@James Oh, The solution that did work felt a bit like a hack to me and that should be a proper way to do it. I'm new to React, so I really didn't it was the right solution. I have a question, why the "event' object cannot be accessed inside of the this.setState()? — Ruby
– Ruby, Commented Aug 11, 2018 at 17:15
@James Where should I add "event.persist()" and what does it do? If you have an article or something that I can read it would be awsome. — Ruby
– Ruby, Commented Aug 11, 2018 at 17:16
setState do the merge of old state and object passed into setState, so i think in your case, ...this.state is not required, also new value is independent of prevState value so functional setState is not required here, you can directly use: this.setState({ [event.target.name]: event.target.value }) — Mayank Shukla
– Mayank Shukla, Commented Aug 11, 2018 at 17:20

James · Accepted Answer · 2018-08-11 17:17:24Z

2

Something like this should work

onInputChange = event => {
    event.persist();
    this.setState(() => ({
        ...this.state,
        [event.target.name]: event.target.value
    }));
};

Although I will say I like your last attempt best.

Here are docs about synth events in react -> https://reactjs.org/docs/events.html

Also the functional setState signature receives the component's current state and next props as arguments, not the (prevState, event) => { as you have it.

answered Aug 11, 2018 at 17:17

James

5,8674 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass the "event" object to the functional version of "this.setState()"? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related