使用钩子更新反应组件中的 object 值

Question

Basically the prompt is this. You are given a list of users and their salaries. When you click on the salaries an input field should appear so you can update the user salary. the input field should not show at the same time as the hard coded salary. Basically all of the functionality i need is there other than the input field not actually updating the salary. extra credit would be when i click on a salary only the input field for that salary showing up but thats not the issue I am currently trying to fix. I can see based on console.logs that the line user.salary = salaryInput is essentially where the code stops working so any help would be great.

import { useState, } from 'react';

const users = [
  { name: "John Doe", id: 1, salary: 111111 },
  { name: "Jane Doe", id: 2, salary: 2222222 },
  { name: "Billy Doe", id: 3, salary: 3333333 }
];

const Salary = () => {
  
  const [displayUser, setDisplayUser] = useState(users);
  console.log('displayUser:', displayUser)
  const [salaryInput, setSalaryInput] = useState(); // [value, setvalue
  const [edit, setEdit] = useState(false)

  const onSalaryChange = (event) => {
    const salaryFieldString = event.target.value;
    setSalaryInput(salaryFieldString); 
    //console.log(salaryInput)
  }

  const onClickHandler = (event) => {
    const { id } = event.target;
    const updatedUser =  users.map((user) => {
      //console.log('id:', id)
      //console.log('user.id:', user.id)
      if (user.id === id) 
        user.salary = salaryInput;
        //console.log('salaryInput:', salaryInput)
        //console.log('user.salary:', user.salary)
        //console.log('user:', user)
        return user;
    })
    console.log('updateduser:', updatedUser)
    setDisplayUser(updatedUser)
    setEdit(false);
  }

  return (
    <div>
      {displayUser.map((user) => {
        return (<div key={user.id}>
                <div>{user.name}</div>
                <div onClick={() => {setEdit(true)}}>
                {!edit && <div>{user.salary}</div>}
                {edit && <input type='number' onChange={onSalaryChange}></input>}
              </div>
            <button onClick={onClickHandler} id={user.id}>update Salary</button>
          </div>
        )}
      )}
    </div>
  )
}

export default Salary

Answer 1

Try returning

{...user, salary: salaryInput}