How to update nested state in react component without using redux
Tags: beginners, react, javascript, tutorial
Published: 2021-09-06 13:26:46

In this article, I'm going to create a simple registration form using bootstrap where we will make a functional component, in this component we will use react ``useState()`` hooks,where will make a nested state in a single object and try to update the nested object.it is very difficult to update nested state in real life project.
I'm hoping you are familiar with basic of reactjs,we are not going the basic settings of reactjs,we are going to jump on registration form creation.

let's start to create registration form using Bootstraps.
in ``App.js`` file we will create registration form
just copy the snippet of html code.
```html
 <div>
      <form onSubmit={submit}>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Email"
            name="email"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="State"
            name="state"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="City"
            name="city"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Latitude"
            name="lat"
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Longitude"
            name="long"
          />
        </div>
        <div className="form-group">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>
```
now let's start to create a state where the user data will be available in our component.
``App.js``
```javascript
export default function App() {
  const [user, setUser] = React.useState({
    username: '',
    email: '',
    address: {
      state: '',
      city: '',
      geolocation: {
        lat: '',
        long: ''
      }
    }
  });

  }
```
Here we have created a state with nestes state.now lets add name and value attributes in our html code and also add a form submit method ``submit`` and onChange event ``onChange`` into html inputs field.
```html
 <div>
      <form onSubmit={submit}>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
            value={user.username}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Email"
            name="email"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="State"
            name="state"
            value={user.address.state}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="City"
            name="city"
            value={user.address.city}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Latitude"
            name="lat"
            value={user.address.geolocation.lat}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Longitude"
            name="long"
            value={user.address.geolocation.long}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
      </form>
    </div>
```
``onChange`` events
```javascript
const onChange = e => {
    let data = { ...user };
    let name = e.target.name;
    let val = e.target.value;
    if (name == 'username' || name == 'email') {
      data = { ...data, [name]: val };
    } else if (name == 'state' || name == 'city') {
      data = {
        ...data,
        address: {
          ...data.address,
          [name]: val
        }
      };
    } else if (name == 'lat' || name == 'long') {
      data = {
        ...data,
        address: {
          ...data.address,
          geolocation: {
            ...data.address.geolocation,
            [name]: val
          }
        }
      };
    }
    setUser(data);
  };
```
and onSubmit event ``submit``
```javascript
const submit = e => {
    e.preventDefault();
    console.log(user);
  };
```
let's see the whole code together.
``App.js``
```javascript
import React from 'react';
export default function App() {
  const [user, setUser] = React.useState({
    username: '',
    email: '',
    address: {
      state: '',
      city: '',
      geolocation: {
        lat: '',
        long: ''
      }
    }
  });
  const onChange = e => {
    let data = { ...user };
    let name = e.target.name;
    let val = e.target.value;
    if (name == 'username' || name == 'email') {
      data = { ...data, [name]: val };
    } else if (name == 'state' || name == 'city') {
      data = {
        ...data,
        address: {
          ...data.address,
          [name]: val
        }
      };
    } else if (name == 'lat' || name == 'long') {
      data = {
        ...data,
        address: {
          ...data.address,
          geolocation: {
            ...data.address.geolocation,
            [name]: val
          }
        }
      };
    }
    setUser(data);
  };
  const submit = e => {
    e.preventDefault();
    console.log(JSON.stringify(user));
  };
  return (
    <div>
      <form action="">
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
            value={user.username}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Email"
            value={user.email}
            name="email"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="State"
            name="state"
            value={user.address.state}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="City"
            name="city"
            value={user.address.city}
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Latitude"
            value={user.address.geolocation.lat}
            name="lat"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <input
            type="text"
            className="form-control"
            placeholder="Longitude"
            value={user.address.geolocation.long}
            name="long"
            onChange={onChange}
          />
        </div>
        <div className="form-group">
          <button className="btn btn-primary" onClick={submit}>
            Submit
          </button>
        </div>
      </form>
    </div>
  );
}
```