score:0

Accepted answer
const makehandlechange = key => event => {
  setuser({...user, [key]: event.target.value});
};

<input type="text" placeholder="firstname" onchange={makehandlechange('firstname')}/>
<input type="text" placeholder="lastname"  onchange={makehandlechange('lastname')}/>

score:-1

this should do what you're expecting - add name attribute to your input that matches with your state object that manages the values.

const myform = () => {
    const [user, setuser] = usestate({
        firstname :"",
        lastname: "",
    });
    const handlechange = (event) => {
      setuser({ ...user, [event.target.name]: event.target.value })
    }
    return (
     <form>
        <input type="text" name="firstname" placeholder="firstname" onchange={handlechange}/>
        <input type="text" name="lastname" placeholder="lastname"  onchange={handlechange}/>
     </form>

    )
}

hope this is helpful :)

score:0

you can change your input and add another attribute of name, then access the name property of the event and pass that as the property name to the setuser(...) function.

input:

<input type="text" placeholder="firstname" name="firstname" onchange={handlechange}/>
<input type="text" placeholder="lastname" name="lastname" onchange={handlechange}/>

handlechange() function

    const handlechange = (event) => {
        setuser({...user, [event.target.name]: event.target.value})
     }

score:1

this is some rough code as i'm not in a position to test it, but the theory should be the same, might need tweaking, you can use a property accessor to update your object. just tweak the html slightly.

input

<input type="text" placeholder="firstname" name="firstname" onchange={handlechange}/>
<input type="text" placeholder="lastname" name="lastname"  onchange={handlechange}/>

handlechange() function

   const handlechange = (event) => {

        setuser({...user, [event.target.getattribute('name')]:event.target.value})
     }

Related Query

More Query from same tag