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.
Source: stackoverflow.com
Related Query
- my onChange event is not working on input elements
- React form elements onchange event not working when generated dynamically
- React - onChange event & function not working on imported Input component
- React onChange not working for input inside functional component
- Handle change event not working for input types?
- Antd form setFieldValue on OnChange event is not working
- I am using react-tinymce and its onChange prop is not working properly, it only call on few events, I want to call it on onKeyup event
- Why is my onChange event not working in React?
- Can't type in react Input Text Field - onChange not working properly
- onChange event is not working on my Select
- onChange event not firing for input field with React
- React - Input not working when using onChange and onKeyDown
- Input onChange is not working using ref value
- React - Do I HAVE to add an onChange event handler to each input field to make input field NOT read only?
- material ui slider component onChange event not working with Fromik handleChange event
- onChange not working in React for input box
- onChange not working on the first input into the text field
- Filled input does not fire onchange event in REACT
- onChange function for input fields not working
- ReactJS: onChange event is not firing input
- onchange input not working useState in react
- React Input element onChange event not triggered
- React JS - input onChange event not setting phone number as valid until 1 extra character typed
- onChange event not working after window.reacptcha.reset() in recaptcha v2 using react-google-recaptcha npm package - [recaptcha just keeps on loading]
- onChange is not working in reactstrap custom input switch
- React onChange event will not fire on custom Input
- Reactjs Typescript form input elements value not working
- React JS Nested elements both use same onClick event and child event is not working
- My input is not working in React, onChange looks good too
- onKeyDown event not working on divs in React
More Query from same tag
- Posting Form data as json to nested serializer from ReactJS
- Creating onChange function for Range Slider in React.js
- Component not displayed - React
- How to mock DataTransfer with Jest
- Why react shows TypeError: undefined has no properties even after passing it properties?
- How to test redux-saga delay
- How to get details of error from .NET catch to React.JS?
- Styling react-alice-carousel dots
- Redux - Store doesn't work
- list items are not deleting properly (React)
- Unable to click in ui after component get rendered in react
- Error in JSON parsing Javascript loosing id field
- Is there a way to return document ID by checking field values
- Assign styled-component CSS property based on props passed to component
- Konva Text Bounding
- i got error from console while making loginPage but i don't know what's wrong (React.js)
- React custom hooks not working as expected
- How to use 2 different versions of the same node dependency in package.json?
- In react js can we create an array even if the page rerender the content or array should be there?
- Next.js: Router.push with state
- Why can I get an image from public folder but not a json file
- ReactJS - How to store a string in setState and display in HTML?
- react datepicker custom css styling
- ERROR in ./src/components/BasicList.js Module build failed: SyntaxError: Decorators are not officially supported
- How to store a value in an array without deleting the previous value
- Calculating average difference between date() entries in an array (in ms)
- Typescript React prop types with two possibilities
- Tailwind CSS align text in center of border on element
- How to apply global styling to a react component library?
- Why is it requiring two clicks to execute state change in react?