React hooks select resuable component losing options values on set state - reactjs

Question

I am trying to set options from a "state" Object, which has initial data which contains courses array.This
value is lost on setting state.I have added the comments line in the code.
Thanks for the help in advance.
Used for Input
Input.jsx
import React from 'react';
const Input = (props) => (
<div className="form-group">
<label htmlFor={props.name} className="form-label">{props.title}</label>
<input
className="form-input"
id={props.name}
name={props.name}
type={props.type}
value={props.value}
onChange={props.handleChange}
placeholder={props.placeholder}
/>
</div>
)
export default Input;
Select Resuable components
Select.jsx
import React from "react";
const Select=(props)=>(
<div className="form-group">
<label htmlFor={props.name}>{props.title}</label>
<select
id={props.id}
name={props.name}
value={props.value}
onChange={props.handleChange}
defaultValue={props.placeholder}
>
<option defaultValue={props.placeholder} disabled>{props.placeholder}</option>
{
props.options && props.options.map(option=>(
<option
key={option}
value={option}
label={option}
>{option}</option>
))
}
</select>
</div>
)
export default Select;
Setting state here losing courses values if not set through state
FormContainer.jsx
import React, {useState } from 'react';
import Input from "./Input";
import Select from "./Select";
import { useEffect } from 'react';
const FormContainer = function () {
const userInitialData ={
user:{
name: '',
course:'',
},
courses:["course1","course2"]
};
const courses=["course1","course2"];
const [newUser, setNewUser] = useState(userInitialData);
function handleFormSubmit(e) {
e.preventDefault();
console.log(newUser);
}
function handleClearForm (){
}
function onChange(e){
const value=e.target.value;
const name=e.target.name;
setNewUser((prevState)=>({
user:{...prevState.user,
[name]:value},
courses:prevState.courses // If this line is removed on set state losing values
}))
}
return (
<form className="container" onSubmit={handleFormSubmit}>
<Input id="name" name="name" type="input" title="name"
value={newUser.name} placeholder="enter name" handleChange={onChange}/>
<Select id="course" name="course" title="Course List"
placeholder="Select Course" handleChange={onChange}
options={newUser.courses}
value={newUser.course}
/>
<button onSubmit={handleFormSubmit}>Submit</button>
</form>
)
}
export default FormContainer;

Answer 1

Like stated in the comments, this behavior is expected. The useState updater function does not do a merge like it's class-based counterpart does.
From the docs:
unlike this.setState in a class, updating a state variable always replaces it instead of merging it.
This means every value you want to keep, must be explicitly given in the update.
There are a few easy ways to get the result you want. The first would be to simply spread the previous state values before you make any updates. Example below:
const {useState} = React;
const Example = () => {
const [state, setState] = useState({a: 'foo', b: 'bar'});
const update = () => {
setState((prevState) => ({
...prevState,
a: prevState.a + 'a'
}));
}
return (
<div>
<div>{JSON.stringify(state)}</div>
<button onClick={update}>Update "a"</button>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
It's important to do the spread before the other values are assigned, or your updates will be overwritten. This method is a little simpler than replacing each value individually.
The second option would be to make a custom hook that will merge the state for you. This way you can treat the state update the same way as the class-based setState. Here is an example of what that custom hook might look like:
const {useState} = React;
const useMergeState = (initialValues) => {
const [state, setState] = useState(initialValues);
const updater = (obj) => {
if (typeof obj === "function") {
setState((prevState) => (Object.assign({}, prevState, obj(prevState))));
} else {
setState((prevState) => (Object.assign({}, prevState, obj)));
}
}
return [state, updater];
}
const Example = () => {
const [state, setState] = useMergeState({a: 'foo', b: 'bar'});
const update = () => {
setState((prevState) => ({a: prevState.a + 'a'}));
}
return (
<div>
<div>{JSON.stringify(state)}</div>
<button onClick={update}>Update "a"</button>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
This hook could be moved to it's own file and reused throughout your app as needed. I added support for both plain object updates (setState({a: 'new value'})) or using the updater function. So this should not cause any loss of functionality.