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.
  };

CodePudding user response：

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: '' },
    }

CodePudding user response：

You can do following:

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