How to handle input change in react?

Question

I am making a very simple react application that has the basic details as inputs.

I am having these form values in context.

context.js

import React, { useState } from "react";

export const FormContext = React.createContext();

export function FormProvider({ children }) {
  const [formValue, setFormValue] = useState({
    basicDetails: {
      firstName: "John",
      lastName: "Doe",
      address: {
        city: "city",
        zip: "zip"
      }
    }
  });

  return (
    <FormContext.Provider value={[formValue, setFormValue]}>
      {children}
    </FormContext.Provider>
  );
}

In basic details component, I am trying to render the form like,

basicdetails.js

The below code is working fine

    <label htmlFor="firstName">First Name: </label>
    <input
      type="text"
      className="form-control"
      id="firstName"
      name="firstName"
      value={basicDetails.firstName}
      onChange={(event) => handleInputChange(event)}
    />

The below code is not working

    <label htmlFor="lastName">City: </label>
    <input
      type="text"
      id="city"
      name="city"
      value={basicDetails.address.city}
      onChange={(event) => handleInputChange(event)}
    />

Reason:

The second given input lies under nested object ie.., basicDetails.address.city.

And I am giving the name attribute value as city only.

   basicDetails: {
      firstName: "John",
      lastName: "Doe",
      address: {
        city: "city",
        zip: "zip"
      }
    }

But the handleInputChange covers only parent level changes.

  const handleInputChange = (event) => {
    const { name, value } = event.target;

    setValue((prev) => {
      const basicDetails = { ...prev.basicDetails, [name]: value };
      return { ...prev, basicDetails };
    });
  };

Requirement:

Please kindly help me to update the form that has nested object as well.. basicdetails.address.city .

Note:

Now I am having city and zip but later it may extend and more number of fields will be added to it.. So I cannot hardcode the condition check..

alisasani · Accepted Answer · 2021-04-26 11:22:23Z

2

you can use this approach to check whether any property exist in the json or it should be stored in the address:

const handleInputChange = (event) => {
    const { name, value: val } = event.target;
    console.log("name", name, value);
    // if (name === city)
    // const updateName =
    setValue((prev) => {
      const basicDetails = {
        ...prev.basicDetails,
        ...(value.basicDetails[name] !== undefined
          ? { [name]: val }
          : { address: { ...value.basicDetails.address, [name]: val } })
      };
      return { ...prev, basicDetails };
    });
  };

sandbox

edited Apr 26, 2021 at 11:22

answered Apr 26, 2021 at 11:11

alisasani

3,1311 gold badge10 silver badges19 bronze badges

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

8 Comments

Undefined Over a year ago

Thanks for your answer.. But I am in the need to handle this dynamically.. Now I am having city and zip but later it may extend and more number of fields will be added to it.. So I cannot hardcode it..

Undefined Over a year ago

Adding to that in your solution, zip has been moved to parent level but it needs to be inside address only.. For now I am having two inputs in parent level and two inputs in nested level (under address) ..

alisasani Over a year ago

now it's handled dynamically. Please let me know if it works for you

Undefined Over a year ago

What does this line mean? const { name, value: val } = event.target; ? I am getting error in my real app that 'value' is not defined ..

alisasani Over a year ago

as you had a variable called value already, I renamed the event.target.value to event.target.val in order to prevent confusion.

|

Volper · Accepted Answer · 2021-04-26 11:16:38Z

1

It doesn't work for the reason you said: it is a nested object. One solution would be to check if the input is a city or a zip input and if so, change the nested basicDetails.address object instead of the basicDetails object directly:

const basicDetails = Object.keys(prev.basicDetails.address).includes(name)
  ? {
    ...prev.basicDetails,
    address: { ...prev.basicDetails.address, [name]: value }
  }
  : { ...prev.basicDetails, [name]: value };

edited Apr 26, 2021 at 11:16

answered Apr 26, 2021 at 11:11

Volper

6941 gold badge6 silver badges15 bronze badges

2 Comments

Undefined Over a year ago

Thanks for your answer.. But I am in the need to handle this dynamically.. Now I am having city and zip but later it may extend and more number of fields will be added to it.. So I cannot hardcode it..

Volper Over a year ago

Object.keys(prev.basicDetails.address) should work then. Edited the answer.

daniel · Accepted Answer · 2021-04-26 11:57:21Z

try this:

    <label htmlFor="lastName">City: </label>
<input
  type="text"
  id="city"
  name="city"
  value={basicDetails.address.city}
  onChange={(event) => handleInputChange(event,(parentPropName = "address")}
/>

then in your handleInputChange :

 const handleInputChange = (event,parentPropName ) => {
const { name, value } = event.target;
  if(parentPropName ){
    setValue((prev) => {
  const basicDetails = { ...prev.basicDetails,[ parentPropName ]: 
      ...prev.basicDetails[parentPropName ],
       [name] : value
      };
  return { ...prev, basicDetails };
  });
  }
    else {
setValue((prev) => {
  const basicDetails = { ...prev.basicDetails, [name]: value };
  return { ...prev, basicDetails };
});
};

 }

for other fields just remove parentPropName and in if condition it will be undefined and going to be false

Collectives™ on Stack Overflow

How to handle input change in react?

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related