dynamically changing value of nested object when using setState

Question

I have a piece of state which looks as so:

    const [values, setValues] = useState({
        firstName: '',
        lastName: '',
        dateOfBirth: {
            month: '',
            day: '',
            year: ''
        },
        phoneNumber: '',
        gender: '',
        interests: [],
        language: '',
        medicareNumber: ''
    })

I try to reassign the values of month day and year in the dateOfBirth object onChange, what is the syntax to do this and not overwrite any of the other keys in the object?

                        <input
                            value={values.dateOfBirth.month}
                            onChange={(e) => setValues({
                                ...values,
                                dateOfBirth: { month: e.target.value }
                            })}
                            type='number'
                            placeholder='MM'
                        />

                        <input
                            value={values.dateOfBirth.day}
                            onChange={(e) => setValues({
                                ...values,
                                dateOfBirth: { day: e.target.value }
                            })}
                            type='number'
                            placeholder='DD'
                        />

the code above is setting the value of dateOfBirth to only month or only day. But I need all the keys and values to remain the same and only change the value inside the respected key.

You can spread dateOfBirth inside itself before overwriting the key value pair you want — StackByMe
– StackByMe, Commented Nov 19, 2021 at 19:39
@Reyno I figured it is possible. I just can't dial in the correct syntax. may you provide a code example? — Ben Shekhtman
– Ben Shekhtman, Commented Nov 19, 2021 at 19:42
For complex state it's recommended to use useReducer. You have more control over the state. useState is generally used for simple state variable like primitive values. en.reactjs.org/docs/hooks-reference.html#usereducer — Antonio Pantano
– Antonio Pantano, Commented Nov 19, 2021 at 20:08

moonwave99 · Accepted Answer · 2021-11-19 19:42:07Z

1

Try:

<input
    value={values.dateOfBirth.month}
    onChange={(e) => setValues({
        ...values,
        dateOfBirth: {
            ...values.dateOfBirth,
            month: e.target.value
        }
    })}
    type='number'
    placeholder='MM'
/>

Or better, try not to have nested state properties.

answered Nov 19, 2021 at 19:42

moonwave99

22.9k3 gold badges49 silver badges71 bronze badges

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

2 Comments

Ben Shekhtman Over a year ago

I have 3 separate inputs for day month and year. It was the only way I could figure to do it? Any better solutions?

moonwave99 Over a year ago

1. use <input type="date">; 2. create a <DatePicker> component that returns a Date object, and store that inside your main form state.

Collectives™ on Stack Overflow

dynamically changing value of nested object when using setState

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related