Unable to change value in input onChange in React JS

Question

Following is a sample code to handle change in input values

import React, { useState } from 'react'

function MyName () {

    const [ formData, setFormData ] = useState(
        {
            name:'test',
            age:29,
            account: {
                card:3939939393,
                exp:2020
            }
        }
            )

    function handleChange1 (evt) {

        setFormData({
           ...formData , [evt.target.name]:evt.target.value
        });
    }

    function handleSubmit1 () {

        console.log(formData);


    }

    return (
        <div>
            <h1>My name is: {formData.name}</h1>
            <h1>My age is: {formData.age}</h1>
            <h1>My card is: {formData.account.card}</h1>
            <h1>My ex is: {formData.account.exp}</h1>

            <input name="name" type="text" value={formData.name} onChange={handleChange1} />
            <input name="age" type="text" value={formData.age} onChange={handleChange1} />
            <input name="card" type="text" value={formData.account.card} onChange={handleChange1} />
            <input name="exp" type="text" value={formData.account.exp} onChange={handleChange1} />


            <button onClick={handleSubmit1}>Click</button>


            <div>


            </div>
        </div>
    )
}

export default MyName

So for this example code I was able to change the name and age values but the card and exp values I couldn't change value why ??

when I wanted to add a new value of the card and also when I wanted to add a new value of exp the input of (card, ex) became blocked

score 0 · Accepted Answer · answered May 22 '20 at 09:13

0

It's normal, the exp and card values are not at the top of your object, but in a sub-object account.

For both of these fields, you should use an other function

function handleChange2 (evt) {

    setFormData({
       ...formData , account:{
           ...formData.account,
           [evt.target.name]:evt.target.value
       }
    });
}

answered May 22 '20 at 09:13

benjamin Rampon

1,316
11
18

First Thanks , this solution work but the name and age they became blocked for change – mzaxhmars May 22 '20 at 09:25
You have to use the handleChange2 only for the acc and exp fields – benjamin Rampon May 22 '20 at 09:27
`function handleChange1 (evt) { setFormData({ ...formData, account : { ...formData.account, [evt.target.name]:evt.target.value } , [evt.target.name]:evt.target.value }); }` i changed the function like this and works fine for both – mzaxhmars May 22 '20 at 09:29
You have to use handleChange1 for name and age field and use the new handleChange2 for the card and exp fields – benjamin Rampon May 22 '20 at 09:32

score 0 · Answer 2 · answered May 22 '20 at 09:14

You're missing the nesting into account. The name and age are "direct" state variables, but card and exp belong to account and are therefore not correctly set with

setFormData({
  ...formData , [evt.target.name]:evt.target.value
});

So you'd need to catch these cases in your setFormData

score 0 · Answer 3 · answered May 22 '20 at 09:18

0

Basically, you are not copying the nested object values when you are setting the state. I would suggest you to re-write this as shown here: Updating an object with setState in React use the portion "updating nested state object".

answered May 22 '20 at 09:18

CyberMessiah

1,084
11
14

Unable to change value in input onChange in React JS

3 Answers3