如何在 React(Next.js) 中分别控制每个属性？

Question

import React from 'react';
import { makeStyles} from '@material-ui/core/styles';
import {Select, MenuItem} from '@material-ui/core';
import useState from 'react';

const test = () => {

const data = [
{TITLE : "Festival", PRIORITY : 3, STEP : 1},
{TITLE : "Headphone", PRIORITY : 2, STEP : 2},
{TITLE : "Mountain", PRIORITY : 1, STEP : 1}
]

return (
<>
{
data.map((info) => (
<div>

<div>{info.TITLE}</div>

<Select value={info.PRIORITY}>
  <MenuItem value={1}> 1 </MenuItem>
  <MenuItem value={2}> 2 </MenuItem>
  <MenuItem value={3}> 3 </MenuItem>
</Select>

<Select value={info.STEP}>
  <MenuItem value={1}> 1 </MenuItem>
  <MenuItem value={2}> 2 </MenuItem>
  <MenuItem value={3}> 3 </MenuItem>
</Select>

</div>
))
}
</>
)}

export default test;

In this code, I'm trying to control PRIORITY value and STEP value respectively.

I'm having trouble because, In my Data array, I have three items. Therefore, If I add

const [priority, setPriority] = useState(undefined);
const [step, setStep] = useState(undefined);

const priorityChange = (e) => {
  setPriority(e.target.value)
};

const stepChange = (e) => {
  setStep(e.target.value)
};

and put this value in

<Select value={priority} onChange={priorityChange}></Select>
...

<Select value={step} onChange={stepChange}></Select>
...

this item,

Every item gets the same value, therefore I'm unable to control each PRIORITY and STEP value.

How can I control each item? I need some help.

I might misspell. Please be understandable!

Answer 1

Firstly your data array is not hooked to any state managing variable. So when you try showing values initially from the data array and then try showing the updated data from the hooks variable when an action is trigged, it is obvious to cause some clash and hence fail to show the updated values. One way to get around this would be, to associate the initial data with a state hook and then update the data array accordingly. It is also important that correct data is updated that corresponds to the action triggered, so here we'd want to make sure that each object of the collection is unique, this could be accomplished by assigning an id attribute on each object. Further up, we can find out the object on which the action was taken on, mutate the property value and then re-construct the array using the state hook function to re-render with the correct updated value(s). Kindly refer to the below code and read the comments to get a clearer idea.

import React, { useState } from "react";
const App = () => {
  const [data, setData] = useState([
    { id: Math.random(), TITLE: "Festival", PRIORITY: 3, STEP: 1 },
    { id: Math.random(), TITLE: "Headphone", PRIORITY: 2, STEP: 2 },
    { id: Math.random(), TITLE: "Mountain", PRIORITY: 1, STEP: 1 }
  ]); //id attribute is added to each object to make sure every object in the array is unique.

  const priorityChange = (e, id) => {
   //This function should accept event and id arguments, to identify and update 
   //values correctly.
    const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated.
    const arr = [...data]; //Copy original array data to constant arr.

    arr[index].PRIORITY = e.target.value; //mutate the PRIORITY property's value

    setData([...arr]); //Set data to the new array with updated value.

    
  };

  const valueChange = (e,id) => {
    //This function should accept event and id arguments, to identify and update 
   //values correctly.
    const index = data.findIndex((item) => item.id === id); //find the index of the object (item) whose priority needs to be updated.
    const arr = [...data];

    arr[index].STEP = e.target.value; //mutate the STEP property's value

    setData([...arr]); //Set data to the new array with updated value.
  };
  return (
    <>
      {data.map((info) => (
        <div key={Math.random()}>
          <div>{info.TITLE}</div>

          <select
            value={info.PRIORITY}
            onChange={(e) => {
              priorityChange(e, info.id); //pass event object and id corresponding to each array object.
            }}
          >
            <option value={1}> 1 </option>
            <option value={2}> 2 </option>
            <option value={3}> 3 </option>
          </select>

          <select
            value={info.STEP}
            onChange={(e) => {
              valueChange(e, info.id); //pass event object and id corresponding to each array object.
            }}
          >
            <option value={1}> 1 </option>
            <option value={2}> 2 </option>
            <option value={3}> 3 </option>
          </select>
        </div>
      ))}
    </>
  );
};

export default App;