score:1
you can do it using computed properties.
first add a name property to each of your input, with values "username", "password", "email", then:
onchange={e => setcontact(contact => ({...contact, [e.target.name]: e.target.value}))}
edit: in react versions before 17, events are pooled and setcontact update function is running asynchronously, so the event needs to be persisted this way:
onchange={e => {
e.persist();
setcontact(contact => ({...contact, [e.target.name]: e.target.value}));
}}
score:1
your handler could refer to the input name which you could then use to update the form object. there's a couple of issues with your syntax for this on the stackblitz - i.e the state object should be an object, not an array, so here's a full example:
const app = () => {
interface iform {
username: string;
password: string;
email: string;
}
const [form, setformvalue] = usestate<iform>({
username: "",
password: "",
email: ""
});
const updateform = (
formkey: keyof iform,
event: react.changeevent<htmlinputelement>
) => {
const { value } = event.target;
setformvalue({
...form,
[formkey]: value
});
};
const handelsubmit = () => {
console.log("form submitted! values: ", form);
};
return (
<div>
<form onsubmit={handelsubmit}>
<div>
<input
type="text"
placeholder="username"
value={form.username}
onchange={e => updateform("username", e)}
/>
</div>
<div>
<input
type="password"
placeholder="password"
value={form.password}
onchange={e => updateform("password", e)}
/>
</div>
<div>
<input
type="email"
placeholder="email"
value={form.email}
onchange={e => updateform("email", e)}
/>
</div>
<input classname="submit" type="submit" value="submit" />
</form>
</div>
);
};
score:1
you can create a object in the state and update the state with cloned object.
here you go, code with results as you expect:
import react, { usestate } from "react";
import { render } from "react-dom";
import './style.css'
const app = () => {
interface ifrom {
username: string;
password: string;
email: string;
}
const [contact, setcontact] = usestate<ifrom[]>({
username:"",
email:"",
password:"",
});
console.log(contact)
const handelsubmit = () =>
{
axios.post(contact) //example
};
return (
<div>
<form onsubmit={handelsubmit}>
<div>
<input
type="text"
placeholder="username"
value={contact.usename}
onchange={e => setcontact({...contact, username: e.target.value})}
/>
</div>
<div>
<input
type="password"
placeholder="password"
onchange={e => setcontact({...contact, password: e.target.value})}
/>
</div>
<div>
<input
type="email"
placeholder="email"
onchange={e => setcontact({...contact, email: e.target.value})}
/>
</div>
<input classname='submit' type="submi" value='submit'/>
</form>
</div>
);
};
render(<app />, document.getelementbyid("root"));
Source: stackoverflow.com
Related Query
- React form with useState for multiple values
- How to use React Hooks Context with multiple values for Providers
- Set multiple state values with React useState hook
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Dynamic React form with multiple values
- Updating multiple array object values with useState in React
- How can I create multiple instances of a React component (having an infinite animation) with different values for the :root variables
- Getting multiple values for checkboxes with dynamic data react
- Why React useState with functional update form is needed?
- useState to update multiple values in React
- how to create React search filter for search multiple object key values
- Clear form input field values after submitting in react js with ant-design
- React form with multiple buttons - how to choose one to handle onSubmit event?
- React w/ TypeScript: why is the type for the state lost when useState with a callback as the updater
- Better aproach for destructing Custom React Hooks with multiple returns?
- How to set multiple values at once in react hook form using Typescript
- Multiple Registration Form with redux and react
- How to get values from react FieldArray in formik form with other fields?
- React Native Inline style for multiple Text in single Text With Touch effect
- any way to have multiple tabs(screens) in react native with a preview like in a browsers do for example?
- lodash , convert string from svg circle (properties and values separates with space) to object for spread in react component inline
- Update state of multiple checkboxes in React with useState
- How to reuse the same Redux Saga for multiple React components with their own state?
- React - how to render multiple buttons with a regular for loop?
- How can I add multiple path for home page with react router dom 6?
- React useState with Object with multiple boolean fields
- Render Once for Multiple set States using useState hook in React
- react dynamic form values with antd
- React Redux Form: form is submiting with old values
- How I can get post values in edit with React/Redux form in React
More Query from same tag
- Make Material-UI Reactjs FloatingActionButton float
- React: Trigger a function when a child asynchronously updates its DOM after rendering
- NextJS - How to combine two getServerSideProps wrappers?
- react-hook-form validation not working with custom fields array
- How do I effectively npm link when using bit.dev?
- How to animate Path2D objects on canvas
- How to insert title inside react-select above selected option?
- react.js rendering dynamic images not working
- Axios returning undefined in React component
- Link the result items from a list to the marker on map leaflet
- React: setState value not working when refreshing the web
- pass function as parameter to custom hooks
- React animated slider + webpack + scss and css
- Change in state do not propagate in props
- Axios POST request doesn't work
- add a click event after deleting list
- How can I import component-specific css styles in React?
- Loading a script in react
- ReactJS: How to properly reset or handle data from state
- Routes is changing the lookup location of resources
- value of state increment twice in reducer.js file
- React - A valid React element (or null) must be returned
- How to conditionally update react list components
- Tell jest to ignore firebase/* when testing
- How to allow only double numbers in input React js
- react-router-dom not rendering components on route change
- How can I write an else if structure using React (JSX) - the ternary is not expressive enough
- Is there a way to set custom attributes for component?
- Why can't I access default props in react constructor, but I can in render?
- Nextjs typescript filtering table with checkboxes