Как правильно редактировать подобный state в react?

Question

[lexstile]

Есть такой код:

const data = [
  { id: 1, value: "тест 1" },
  { id: 2, value: "тест 2" }
];

const [list, setList] = useState([]);

  const handleChangeItemValue = (id) => (e) => {
    const value = e.target.value;
    const index = list.findIndex((item) => item.id === id);
    const newList = [...list];
    newList[index].value = value;
    setList(newList);
  };

useEffect(() => setList(data), []);

  return (
    <div>
      {list.map((item) => (
        <label key={item.id} style={labelStyles}>
          <input
            style={inputStyles}
            value={item.value}
            onChange={handleChangeItemValue(item.id)}
          />
          <button onClick={handleClickRemoveItem(item.id)}>х</button>
        </label>
      ))}
      <button onClick={handleClickAddItem}>Добавить</button>
      <div style={valueStyles}>{renderItemValues()}</div>
    </div>
  );

Можно это как-то иначе и, может, более правильно отредактировать?

Answer 1

[abberati]

const handleChangeItemValue =
  id =>
    ({ target: { value } }) =>
      setList(
        list => list.map(item => item.id === id ? { ...item, value } : item)
      )

Comments

[lexstile]

во я дурак.
спасибо!