score:0

ok, you're doing a funception here.

    const handlechange = input => e => {
        setresumestates({[input]: e.target.value})
    }

this is a "function" that returns a "function that updates state". what you need is to bind a "function that updates state" to "onchange"


so you can try one of these.

first way, just declare a function that receive input event normally.

const handlechange = e => {
   setresumestates({[e.target.name]: e.target.value})
}

<input
  type="text"
  name="firstname"
  value={values.firstname}
  onchange={handlechange}
/>

or if you are feeling func-ky and wanna do func-ception. you can bind onchange with handlechange('firstname'). note that "handlechange('firstname')" will return a function that accept "e" as parameter.

const handlechange = input => e => {
   setresumestates({[input]: e.target.value})
}

<input
  type="text"
  value={values.firstname}
  onchange={handlechange('firstname')}
/>

score:1

you're passing something called values to the component for the input values, but i don't see it defined anywhere. it looks like it the values should just be the state object, so pass that:

<personalinfo nextstep={nextstep} handlechange={handlechange} values={resumestates}/>
                                                                      ^-- here --^

additionally, you're removing all of your state values any time you set one:

setresumestates({[input]: e.target.value})

unlike the setstate operation in older class-based components, the set operation in the usestate hook does not determine the difference for you and only update the new parts. it replaces the state with the new state entirely. make sure you keep the existing state when updating it:

setresumestates({ ...resumestates, [input]: e.target.value })

the same will need to be done for your other state updates as well.

and finally, you're not passing the actual change event to the change handler. only the title. you can pass the change event to the function returned by the function of the change handler:

onchange={e => handlechange('firstname')(e)}

or [potentially] more simply:

onchange={handlechange('firstname')}

this might be getting a little confusing though and is likely to result in bugs. (after all, it already has.) instead of the function within a function, just accept both arguments in the handlechange function:

const handlechange = (input, e) => {
  setresumestates({...resumestates, [input]: e.target.value})
}

and pass them both:

onchange={e => handlechange('firstname', e)}

as an aside, to help you with design-time validation of what's being passed to what functions, you might try making use of typescript in your react development.


Related Query

More Query from same tag