Reactjs and Javascript: how to map a nested object to input field

Question

I need some help. I am new to Reactjs and I am trying to map nested object to an input filed so when the user type something it will be map to the nested object field name.

This is the data I am trying to access.

const [details, setDetails] = useState(
    {
        firstName: '',
        lastName: "", 
        email: '', 
        dataOfBirth: '', 
        phoneNum: '',
        employeeAddress:
            {
                street: '',
                city: '',
                state: '',
                zipcode: 0
            }
    })

input field form I have try the below code and I it's not working

<div className="form-group">
     <label htmlFor="" className="street">Street</label>
     <input type="text" name="street" id="street"
            onChange={e => setDetails({...details.employeeAddress, street: e.target.value})}
            value={details.employeeAddress.state}
      />
</div>

Example the below code work because it not nested inside an object.

<div className="form-group">
     <label htmlFor="" className="firstName">First Name</label>
     <input type="text" name="firstName" id="firstName"
            onChange={e => setDetails({...details, firstName: e.target.value})}
            value={details.firstName}
     />
</div>

You are setting street but assigning state as the value?

Berk Kurkcuoglu
– Berk Kurkcuoglu

2021-04-22 14:52:04 +00:00
Commented Apr 22, 2021 at 14:52 — Berk Kurkcuoglu
– Berk Kurkcuoglu, Commented Apr 22, 2021 at 14:52

Devon Norris · Accepted Answer · 2021-04-22 14:53:30Z

1

you need to also spread the employeeAddress object like so

onChange={e => setDetails({ ...details, employeeAddress: { ...details.employeeAddress, firstName: e.target.value } })}

answered Apr 22, 2021 at 14:53

Devon Norris

1802 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FireFighter · Accepted Answer · 2021-04-22 15:02:52Z

1

const updateEmployeeAddress = e => {
    setDetails({
        ...details, 
        employeeAddress: { 
            ...details.employeeAddress, 
            [e.target.name]: e.target.value
        }
    })         
}

<div className="form-group">
     <label htmlFor="" className="street">Street</label>
     <input 
         type="text" 
         name="street" 
         id="street"
         onChange={updateEmployeeAddress}
         value={details.employeeAddress.street}
      />
</div>

edited Apr 22, 2021 at 15:02

answered Apr 22, 2021 at 14:55

FireFighter

7064 silver badges6 bronze badges

Collectives™ on Stack Overflow

Reactjs and Javascript: how to map a nested object to input field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related