• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

322
Views
Updating State | object is not iterable (cannot read property Symbol(Symbol.iterator))

I have below JSX -

 <FormGroup>
                <Label for="exampleEmail" style={{fontWeight:"bold"}}>What is your e-mail address?</Label>
                <Input type="email" name="email" id="exampleEmail" onChange={(e)=>setStateForProperties(e)} />
            </FormGroup>
            <FormGroup>
                <Label for="examplePassword" style={{fontWeight:"bold"}}>What is your password?</Label>
                <Input type="password" name="password" id="examplePassword" onChange={(e)=>setStateForProperties(e)}/>
 </FormGroup>

State Declarations -

  const iLoginCreds ={
    userName:'',
    password:''
  }
  const [loginCreds, setLoginCredentials] = useState(iLoginCreds)

onChange Method changing state -

  function setStateForProperties(e)
  {
    alert(e.target.id);
    switch (e.target.id) {
      case 'exampleEmail':
        setLoginCredentials(...loginCreds,{
          userName:e.target.value
        
        });
            
        break;

        case 'examplePassword':
        setLoginCredentials(... loginCreds,{
          password:e.target.value
        });
    
      default:
        break;
    }
    console.log(loginCreds);
  }

Error -

When I write anything in textbox (upon onchange event trigger) , I receive an error -

TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

enter image description here

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You need to destruct the previous object properties and return a new object after merging with the new one.

setLoginCredentials({ ...loginCreds, ...{userName:e.target.value} })
about 3 years ago · Juan Pablo Isaza Report

0

Instead of doing this:

setLoginCredentials(...loginCreds, {
  userName:e.target.value
});

, which passes in 2 arguments to useState, you should move the curly braces to surround ...loginCreds, like so:

setLoginCredentials({...loginCreds,
  userName:e.target.value
});

You should do the same for password.

This will change only one property on the object. React Hooks useState() with Object

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error