Saving object in React.useState

user_13333861 0
Viewed 5995

I have a form in my react project, and I want the value of each field to be stored in the state. instead of having multiple states for each field, how can I store the form value as an object in the state? and more importantly how can I access it? (with react hooks)

import React from 'react';

export const UserData = () => {
  return(
     <form>
        <input type="text" placeholder="Name" />
        <input type="email" placeholder="Email" />
        <button>Confirm</button>
     </form>
  )
}
react-hooks reactjs
3 Answers

React Hooks allows you to define a JavaScript Object using useState. See https://daveceddia.com/usestate-hook-examples/

function LoginForm() {
   const [form, setState] = useState({
   username: '',
   password: ''
});

Update the form using the function :

const updateField = e => {
    setState({
        ...form,
        [e.target.name]: e.target.value
    }); 
};

Call the function onSubmit of the button

<form onSubmit={updateField}>
    <input type="text" placeholder="Name" />
    <input type="email" placeholder="Email" />
    <Button >Confirm</button>
</form>
user_133529480

You can use useState hook. Check this 

const [state, setState] = useState({ name, email });

To set the state similar to setState in class based component:

setState({name: 'react', email: 'react'})

To access the state value:

import React, { useState } from 'react';

export const UserData = () => {
const [state, setState] = useState({ name, email });
  return(
     <form>
        <input type="text" placeholder="Name" value={state.name} />
        <input type="email" placeholder="Email" value={state.email}  />
        <button>Confirm</button>
     </form>
  )
}
user_79066710

You should create an initial state value if you want to store the form values as an object using useState, so you can rollback to the initial state after an error. Example,

const initialState = {
  name: "",
  email: ""
};

export const UserData = () => {
  const [formState, setFormState] = useState(initialState);

  const submitHandler = event => {
    event.preventDefault();
    console.log(formState);
  };

  return (
    <form onSubmit={submitHandler}>
      <input
        type="text"
        placeholder="Name"
        value={formState.name}
        onChange={e => {
          setFormState({ ...formState, name: e.target.value });
        }}
      />
      <input
        type="email"
        placeholder="Email"
        value={formState.email}
        onChange={e => {
          setFormState({ ...formState, email: e.target.value });
        }}
      />
      <button>Confirm</button>
    </form>
  );
};

Working demo in codesandbox.

user_135718700
Related