ReactJS: useState for array of object

Question

I have a form with onChange, in the onChange function I need to save values.

const [choosenVar, setChoosenVar] = useState([
    {
      posto1: { name: '', value: '' },
    },
    {
      posto2: { name: '', value: '' },
    },
    {
      posto3: { name: '', value: '' },
    },
    {
      posto4: { name: '', value: '' },
    },
    {
      posto5: { name: '', value: '' },
    },
    {
      posto6: { name: '', value: '' },
    },
  ]);


  const onChange = event => {
    const { name, value, id } = event.target;
    // setchoosenVar({ ...choosenVar, [`posto${id}.nome`]: value });
    const newArr = [...choosenVar];

  };

Now my problem is for every "id" on event.target I should save the name and value in posto"id", How can I do??

Example:

const onChange = event => {
    const { name, value, id } = event.target;
    // name: "Application", value: "appSett", id: "1"
    // in this case I should take: choosenVar.posto1 and set choosenVar.posto1.name = name, choosenVar.posto1.value= value.
  };

Tushar Shahi · Accepted Answer · 2021-10-13 10:41:43Z

1

Always make a copy of array state variables first using ... (spread operator).

findIndex() and update the object at the found index. Using Object.keys() we are getting all the keys of the object, since we are only concerned about the first one we check for it.

You might need spread again to make a copy of the object so you do not mutate state somehow

  const onChange = event => {
    const { name, value, id } = event.target;
    const newArr = [...choosenVar];

    let foundIndex = newArr.findIndex(x => { return Object.keys(x)[0] === 
   `posto${id}` });

    let copyObject = {...(newArr[foundIndex][`posto${id}`]) };

    newArr[foundIndex] = { [`posto${id}`] : copyObject };
     setChoosenVar(newArr );
  };

Note: The above assumes that there are no empty objects. And the Id you are looking for exists.

Would like to add that their might be a better way to store your state. An array with elements like might be easier to handle

   {
      posto: { id : 1, name: '', value: '' },
    }

edited Oct 13, 2021 at 10:41

answered Oct 13, 2021 at 10:35

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

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

2 Comments

Jack23 Over a year ago

So i should create an array with elements like this: { posto: { id : 1, name: '', value: '' }, }, { posto: { id : 2, name: '', value: '' }, }

Tushar Shahi Over a year ago

Yes. In the longer run that should be a better idea. The solution above is for your current implementation though

Sujit Singh · Accepted Answer · 2021-10-13 10:31:15Z

0

You can do following:

    const { name, value, id } = event.target;
    setChoosenVar({
      ...choosenVar,
      ...{`posto${id}`:value}
    })

answered Oct 13, 2021 at 10:31

Sujit Singh

9211 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

ReactJS: useState for array of object

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related