im trying to useState and put in it multiple values from user input

Question

I'm trying to use state and put in it multiple values from user input but when l insert new values the rest of the useState object turns to undefined first textbox

all text box

the code input code

l don't understand why does it turn to undefined after moving and typing in another input text box and when l send it to the API to save it in the database some values register as undefined

error code

Answer 1

That happens because

(e) => setBook({name: e.target.value})

overwrites the current value. You can instead do

(e) => setBook((book) => ({...book, name: e.target.value}))

to merge everything from the existing object and the new name.