Update array of object state in react js

Question

I have the following code snippet from my component where I generate Input field according to the objects in the state.

I can successfully generate the input fields but have been getting error message:

TypeError: Cannot read property 'map' of undefined

Pointing to the method arrayObjToArrary in Utils.js whenever I type in the input field.

How can I update the value of here ??

Main.js

import Input from "../UI/Input";
import {arrayObjToArrary} from "../../utility/Utils.js";

const [profiles, setProfiles] = useState({
    controls: [
      {
        network: {
          elementType: "input",
          elementConfig: {
            type: "text",
            label: "Network",
          },
          value: "Twitter",
        },
      },
      {
        username: {
          elementType: "input",
          elementConfig: {
            type: "text",
            label: "Username",
          },
          value: "@john",
        },
      },
      {
        url: {
          elementType: "input",
          elementConfig: {
            type: "url",
            label: "URL",
          },
          value: "https://example.xyz",
        },
      },
    ],
  });
  
  const profilesControls = arrayObjToArrary(profiles.controls);
  const arrayInputHandler = (event, index, identifier) => {
    const list = [...profiles.controls];
    list[index][identifier] = event.target.value;
    setProfiles(list);
  };
  
  let profileField = profilesControls.map((formElement) => (
    <Input
      label={formElement.config.elementConfig.label}
      key={formElement.index}
      type={formElement.config.elementType}
      elementConfig={formElement.config.elementConfig}
      value={formElement.config.value}
      changed={(event) => arrayInputHandler(event, formElement.index, formElement.id)}
    />
  ));

Utils.js

export const arrayObjToArrary = (controls) => {
  const formElementsArray = controls.map((item,index) =>({
    id: Object.keys(item)[0],
    index:index,
    config: item[Object.keys(item)[0]],
  }))
  return formElementsArray;
}

can you show what this is? arrayObjToArrary also rename to arrayObjToArray otherwise it'll confuse you going forward — Red Baron
– Red Baron, Commented Jun 25, 2020 at 8:35
before map check the result of profilesControls in console — MUHAMMAD ILYAS
– MUHAMMAD ILYAS, Commented Jun 25, 2020 at 8:45

iamhuynq · Accepted Answer · 2020-06-25 08:45:25Z

1

You can try this

const arrayInputHandler = (event, index, identifier) => {
    const list = [...profiles.controls];
    list[index][identifier].value = event.target.value;
    setProfiles({ controls: list });
};

check here codesandbox

answered Jun 25, 2020 at 8:45

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2020-06-25 10:56:25Z

1

The issue in how you update your profiles object in arrayInputHandler. When you pass in the list to setProfiles, it changes its structure from an object to array.

Also you must not mutate the original state values. The correct way to update is as below

const arrayInputHandler = (event, index, identifier) => {
    const value = event.target.value;
    setProfiles(prev => ({
        ...prev,
        controls: profiles.controls.map((controls, i) => {
           if(i === index) {
              return {
                ...controls, [identifier]: {
                  ...controls[identifier],
                  value
               }
              }
           }
           return controls
        });
    }));
  };

P.S. You can always solve your problem in a simplistic manner like

const arrayInputHandler = (event, index, identifier) => {
    const list = [...profiles.controls];
    list[index][identifier] = event.target.value;
    setProfiles({profile:list});
  };

However its not a correct approach and should be avoided as react relies a lot on immutability for a lot of its re-rendering and other optimizations

edited Jun 25, 2020 at 10:56

answered Jun 25, 2020 at 8:45

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

2 Comments

psudo Over a year ago

Thank you for your answer but with your snippet I'm getting TypeError: Cannot read property 'label' of undefined error

Shubham Khatri Over a year ago

I don't see label being used in the above code snippet. Anyways I have updated my answers

Collectives™ on Stack Overflow

Update array of object state in react js

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related