javascript - ¿How to get Form values from functional component React?

Question

I'm trying to make a table that receives a new user data that is got in a form. Heres is my code:

import React,{useState}  from 'react'

export default function FormAdd({callbackSubmit,...props}) {

    const [user,setUser] = useState({});

    const handleChangeInput = (name,value) => {
        setUser((last) => {
           
            [name]:value,
        }
        );
    }

    return (
        <form 
        onSubmit={
            (e)=>{
                e.preventDefault();
                callbackSubmit(user)            
            }
        }
        className="formadd-container"
        >
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"firstname"} placeholder="Fist Name" type="text" className="formadd-container__input"/>
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"age"} placeholder="Age" type="text" className="formadd-container__input"/>
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"gender"} placeholder="Gender" type="text" className="formadd-container__input"/>
            <input onChange={(e)=>{handleChangeInput(e.target.name,e.target.value)}} name={"phone"} placeholder="Phone" type="text" className="formadd-container__input"/>
            <input  value="Add" type="submit" className="formadd-container__button"/>
        </form>
    )
}

I get an error >expected ";" inside handleChangeInput function, when I try to set the values for the user object.

Any ideas?

Answer 1

You miss the return in the setState callback.

Replace this :

const handleChangeInput = (name,value) => {
        setUser((last) => {
           
            [name]:value,
        }
        );
    }

By:

const handleChangeInput = (name,value) => {
        setUser((last) => ({
           
            [name]:value,
        })
        );
    }