CODEWITHSUNDEEP
javascriptreactjsobject
Osama
Osama

Reputation: 71

How to use usestate with object in ReactJS?

I am trying to write a simple program that allows you to enter your first and last name in input fields so you get a greeting based on your name. But I cannot get it to work.

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [Savedinput, setSavedinput] = useState({Fname:' ' , Lastname:''} );
  const ChangeFirst = (e) => {
    setSavedinput Savedinput.Fname(e.target.value);
  };
  const ChangeLast = (e) => {
    setSavedinput Savedinput.Lastname(e.target.value);
    console.log(e.target.value);
  };
  return (
    <div className="App">
      <input type="Text" onChange={ChangeFirst}></input>
      <input type="Text" onChange={ChangeLast}></input>

      <h1> hello  {Fname} {Lastname}  </h1>
    </div>
  );
}

Upvotes: 0

Views: 461

Answers (6)

Jakir Hossen
Jakir Hossen

Reputation: 461

You can use destructure method.

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [Savedinput, setSavedinput] = useState({Fname:' ' , Lastname:''} );
  const onInputChange = (e, attr) =>{
      setSavedinput({...Savedinput, [attr]: e.target.value});
  }
  return (
    <div className="App">
      <input type="Text" onChange={(e)=>{onInputChange(e, 'Fname)}} value={Savedinput.Fname}></input>
      <input type="Text" onChange={(e)=>{onInputChange(e, 'Lastname)}} value={Savedinput.Lastname}></input>

      <h1> hello  {Savedinput.Fname} {Savedinput.Lastname}  </h1>
    </div>
  );
}

Upvotes: 2

Ruchi Tiwari
Ruchi Tiwari

Reputation: 261

You can use this for the object and ...savedinput to maintain the existing object with updating only changed value

export default function App() {
const [savedinput, setSavedinput] = useState({firstname:"", 
lastname:""});

 function ChangeFirst  (e) {
 savedinput.firstname = e
 setSavedinput({...savedinput})
 };

 function ChangeLast(e) {
 savedinput.lastname = e
 setSavedinput({...savedinput})
 };

return (
 <div className="App">

  <input type="Text" onChange={event => 
   ChangeFirst(event.target.value)}></input>

  <input type="Text" onChange={event => 
  ChangeLast(event.target.value)}>.  
   </input>

  <h1> hello  {savedinput.firstname }{savedinput.lastname}   </h1>
  </div>
  );
   }

You can find this working in this link

Upvotes: 0

Ishan Kesharwani
Ishan Kesharwani

Reputation: 292

Firstly the setSavedinput is a function and not a variable. It's a function to set the value of the variable used with it. Since you are taking the value from input field the following method might work out for you.

import React, { useState } from "react";
export default function App() {
      const [Savedinput, setSavedinput] = useState({Firstname:'' , Lastname:''} );
        return (
            <div className="App">
              <input type="text" value={Savedinput.Firstname} onChange={(e)=>setSavedinput({... Savedinput , Firstname:e.target.value })} />
              <input type="text" value={Savedinput.Lastname} onChange={(e)=>setSavedinput({... Savedinput , Lastname:e.target.value })} />

      <h1> hello  {Firstname} {Lastname}  </h1>
    </div>

Instead of declaring a function , you can do it inline for this purpose . Also I would suggest you to keep the variable names in an order. This is gonna you a lot.

Upvotes: 0

Mohamed
Mohamed

Reputation: 469

<input type="Text" onChange={ChangeFirst}></input>
<input type="Text" onChange={ChangeLast}></input>

use two states

const [firstName, setFirstName] = useState('')

const [lastName, setLastName] = useState('')

then respectively on your method use the setState for each of them separately

Upvotes: 0

Syakhisk Al-azmi
Syakhisk Al-azmi

Reputation: 80

You shouldn't mutate state directly

To change the a state object you can use spread operator. So your code would be something like:

  const ChangeFirst = (e) => {
    setSavedinput({...SavedInput, Fname: e.target.value})
  };

  const ChangeLast = (e) => {
    setSavedinput({...SavedInput, Lastname: e.target.value})
  };

The {...SavedInput} will expand the whole object to the argument and then adding the Fname: ... will overwrite that so the new value will be passed instead.

For more advance usage of form I recommend you to use react-hook-form

Upvotes: 1

Rajdeep D
Rajdeep D

Reputation: 3920

You can have 2 states for firstName and lastName

export default function App() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
 
  return (
    <div className="App">
      <input type="Text" value={firstName} onChange={() => setFirstName(e.target.value)}></input>
      <input type="Text" value={lastName} onChange={() => setLastName(e.target.value)}></input>

      <h1> hello  {firstName} {lastName}  </h1>
    </div>
  );
}

Upvotes: 0

Related Questions