score:0
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})
}
Source: stackoverflow.com
Related Query
- Using handleChange function for several inputs
- Using JS React component in TypeScript: JSX element type 'MyComponent' is not a constructor function for JSX elements
- Best practices for using React refs to call child function
- How to load React-select Async with initial options for edit item function when using a search API?
- What is the correct pattern for utility function when using React hooks?
- How do I write test case for a function which uses uuid using jest?
- Using React.memo with hooks for controlled inputs
- react: using es6 component in ts component: ts2605: jsx element type 'yyy' is not a constructor function for jsx elements
- Using Arrow function for class properties in React. Not clear
- Using [key:string]: any to avoid needing an extra function for generics?
- I got an error for using React.useRef inside a react function component
- Mocking simple internal function using Jest for use in rendered React component
- Using .map function for two dimensional array - React
- React - handleChange of multiple inputs by one function
- Difference between using Arrow function or function for onClick in ReactJS?
- Workaround for passing function to ipcMain and back using React, Redux, Electron
- How to trigger a function when cursor stops moving for 3 seconds using react hooks?
- How can I check a function for having arguments without checking their values, using jest & enzyme in react component?
- Babel cannot compile simple JSX for React's render() function - Using Visual Studio Code
- Enforcing TSX prop type inline for function declaration which declares props using object destructuring
- Using arrow function with curly braces and ternary operator for setState's callback error?
- how do i update state in react for updating the value of an object inside an array using array.map function
- React.js two-way binding for two different inputs in one function
- Rendering text boxes using map function for each object in this.state array. how can i handle text in the text area
- How can I wait for multiple promises to all be done before using their return data for another function call?
- Using a single handler function to set the state of inputs in a form in React
- why checking for undefined from a function call causes SSR error, but not directly using `typeof` in react?
- TypeError: (intermediate value).map is not a function when using set for Country Api
- Create an Axios post to send an uploaded file using Dropzone for a Scala function to handle the respective request
- Cannot satisfy wrapper parameter for react testing library render function using TypeScript
More Query from same tag
- relevant code for ngClass.xs or md in reactjs
- Material UI: useStyles (makeStyles) has lower priority after migration to version 5
- Sending session data to React frontend using Larvel backend
- Unable to display API data on React.js
- Testing a React Native component's function that is using try/catch and calls Image.getSize
- Why is this testing in React not working?
- How to cancel cancel all subscriptions and asynchronous tasks?
- Material UI react autocomplete set different label and different value
- Using React Router withRouter
- How to use next() function in Next JS API like Express JS?
- Textbox in reactjs unable to input text
- ES6 and webpack: Redux: How to import a file from a distant directory
- How to test the "onChange" function who will change the value of state with the hooks
- Using redux in NEXT.JS
- form onSubmit vs onClick
- Can't resolve '/images/img-2.jpg' in 'E:\React\react-demo\src'
- Remove all elements which is duplicated in another array in ES6 syntax
- Material-UI theme-able component library
- React-slick slider gets distorted when adding more images after initialisation
- Is there a concurrency issue in this saga?
- Material-ui hoverColor for MenuItem component?
- React get select values by name array
- Commonjs : during the build, How to change the extension of file
- Cannot be authenticated in Dusk using sanctum
- Set tag id as an object attribute
- React how to make table container that beautiful dnd works
- Receiving status 400 when fetching with React Hook Form
- Connecting redux store to nextjs layout
- How can I have overflow height setting with the %?
- I need to pass the ref of a child component to a parent in javascript