JAVASCRIPT

update object in react hooks

- Through Input

        const [state, setState] = useState({ fName: "", lName: "" });
        const handleChange = e => {
            const { name, value } = e.target;
            setState(prevState => ({
                ...prevState,
                [name]: value
            }));
        };

        <input
            value={state.fName}
            type="text"
            onChange={handleChange}
            name="fName"
        />
        <input
            value={state.lName}
            type="text"
            onChange={handleChange}
            name="lName"
        />
   ***************************

 - Through onSubmit or button click
    
        setState(prevState => ({
            ...prevState,
            fName: 'your updated value here'
         }));

usestate with object

import React, { useState } from "react";

function Form() {
  const [user, setUser] = useState({
    name: "",
    email: "",
    password: "",
  });
  const { name, email, password } = user;
  const handleChange = (e) => {
    const { name, value } = e.target;
    setUser({
      ...user,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("Form Submitted");

    console.log(user);
  };

  return (
    <div>
      <h1>Registraction</h1>
      <form action="" onSubmit={handleSubmit}>
        <div className="formGroup">
          <label htmlFor="name">Name: </label>
          <input
            type="text"
            name="name"
            id="name"
            value={name}
            onChange={handleChange}
            required
          />
        </div>
        <div className="formGroup">
          <label htmlFor="email">Email: </label>
          <input
            type="email"
            name="email"
            id="email"
            value={email}
            onChange={handleChange}
            required
          />
        </div>
        <div className="formGroup">
          <label htmlFor="password">Password: </label>
          <input
            type="password"
            name="password"
            id="password"
            value={password}
            onChange={handleChange}
            required
          />
        </div>
        <div className="formGroup">
          <button className="count_btn" type="Submit">
            Register
          </button>
        </div>
      </form>
    </div>
  );
}
export default Form;

javascript react useState update object

- Through Input

        const [state, setState] = useState({ fName: "", lName: "" });
        const handleChange = e => {
            const { name, value } = e.target;
            setState(prevState => ({
                ...prevState,
                [name]: value
            }));
        };

        <input
            value={state.fName}
            type="text"
            onChange={handleChange}
            name="fName"
        />
        <input
            value={state.lName}
            type="text"
            onChange={handleChange}
            name="lName"
        />
   ***************************

 - Through onSubmit or button click
    
        setState(prevState => ({
            ...prevState,
            fName: 'your updated value here'
         }));

usestate with object

import { useState } from 'react';
import './App.css';

function App() {
  const [details, setDetails] = useState({ email: "", password: "" })
  const onChange = (e) => {
    const { name, value } = e.target;
    setDetails({ ...details, [name]: value })
  }
  const submitHandler = (e) => {
    e.preventDefault();
    alert(JSON.stringify(details))
  }
  return (
    <div className="App">
      <form onSubmit={submitHandler}>
        email : <input type="text" name="email" onChange={onChange} value={details.email} />
       //or <input type="text" name="email" onChange={(e) => setDetails({ ...details, email: e.target.value })} value={details.email} /><br /><br />
          password :<input type="text" name="password" onChange={onChange} value={details.password} />
        <button type="submit">Submit</button>
      </form>
      <h2>{details.email}</h2>
      <h2>{details.password}</h2>
    </div>
  );
}

export default App;

Update an object as state with React hooks

const [state, setState] = useState({ fName: "", lName: "" });
const handleChange = e => {
    const { name, value } = e.target;
    setState(prevState => ({
        ...prevState,
        [name]: value
    }));
};

<input
    value={state.fName}
    type="text"
    onChange={handleChange}
    name="fName"
/>
<input
    value={state.lName}
    type="text"
    onChange={handleChange}
    name="lName"
/>