update value of a object item in local state with a input value using setState

Question

What is the correct way to update (concatenate) the input value with the previous value of the item of the object?

Consider the below example:

local states

this.state = { model: 'ggg'}

In handler

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

        const {values} = this.state;
        return (
<TextField
        id="model"
        label="Model"
        name="model"
        value={this.state.model}
        onChange={evt => this.handleChange(evt)}/>
)
    };

this is updating the model while I input the characters and update the model as "ggga" "gggaaa".

But I want to update my object in state now.

local states

this.state = {values: { model: 'ggg'}}

and I tried,

handleChange = (event) => {
this.setState(prevState => ({
  values: {
    ...prevState.values,
    [event.target.name]: event.target.value
  },
}))}

<TextField
    id="model"
    label="Model"
    name="model"
    value={this.state.values.model}
    onChange={evt => this.handleChange(evt)}/>

Output : "ggga", "gggq"

this is not giving me the expected output. Can someone please suggest a solution.

Thank you

What I meant was, is TextField a custom component or from a library. — Shubham Khatri
– Shubham Khatri, Commented Jun 24, 2019 at 7:49

David Alvarez · Accepted Answer · 2019-06-24 07:53:42Z

1

If your state is

{
    values: { 
        model: 'ggg'
    }
}

, and you have several attributes in values (more the just model) and you only want to update model, I would suggest you to do that:

this.setState({
    values: {
        ...this.state.values,
        model: event.target.value,
    } 
});

This also works if you have other attributes in your state. As @corrado4eyes, you do not need to pass the previous state.

answered Jun 24, 2019 at 7:53

David Alvarez

1,30613 silver badges23 bronze badges

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

Comments

cradapyx · Accepted Answer · 2019-06-24 07:39:53Z

1

You don't need to pass ...prevState or ...this.state, you can just use

this.setState({
    myProp: newValue
})

For what regards what you're asking (how to concatenate the characters) use the onKeyDown/onKeyUp event to get just the character you pressed and concatenate it to the state like that:

<TextField
    id="model"
    label="Model"
    name="model"
    value={this.state.values.model}
    onChange={evt => this.handleChange(evt)}
    onKeyDown={evt => this.handleKeyDown(evt)}
/>

.
.
.
.

function handleKeyDown(evt){
    evt.preventDefault();
    this.setState({
        myProp: this.state.myProp + evt.target.value
    })
}

answered Jun 24, 2019 at 7:39

cradapyx

2932 silver badges13 bronze badges

2 Comments

IDF Over a year ago

Simply it is working good in my first example you see. I didn't use onKeyDown there. Can you have any suggestions to update my first example to second one (updating to an object).

cradapyx Over a year ago

I think David Alvarez answered for me, ask again if you have doubts

Collectives™ on Stack Overflow

update value of a object item in local state with a input value using setState

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related