I want to be able to write text in the input field and that should change the text in h3 tag, I have got three input fields and given them "onChange" attribute, and onChange is updating the state with the updated values and on submitting the form it triggers the callback function "updateEmployee" which I have declared in the parent (App.js) component. In this callback function I am copying over the values and overwriting the appropriate key with its updated value. But its not behaving as expected. Any idea where am I going wrong???

const App = ()=>{
  const [state, setState] = useState([{
    id:1,
    name:'Name1',
    role: 'Role1'
  },{
    id:2,
    name:'Name2',
    role:"Role2"
  },{
    id:3,
    name:'Name3',
    role:"Role3"
  }                        
  ])
  

  
  function updateEmployee (id,newName){
    console.log('Hello from function updateEmployee')
  
    const checkingEmployees = state.map((item)=>{
      if(id==item.id){

        return {...state, name:newName}
      }

      return state;
    })
  setState(checkingEmployees);
  }
  
  return (
  <div>
{state.map(data=>(
  <Employee 
    name={data.name} 
    id={data.id}
    key={data.id}
    updateEmployee={updateEmployee}
    />
))}
  </div>
  )
}    
      
function Employee({name,id,updateEmployee}){
  return(
  <div>
      <h3><u>{name}</u></h3>
      
      <EditEmployee 
        name={name} 
        id={id}
        updateEmployee = {updateEmployee}
        />
      </div>
  )
}      
      
function EditEmployee({name,role,id,updateEmployee}){
  const [state2,setState2] = useState(name);


function finalize(e){
 e.preventDefault();
  console.log(id,name);
  updateEmployee(id,state2)
  
}
  
  return (
  <div>
      <form onSubmit = {finalize}>
      <input 
   
       type="text"
        value={state2}
        onChange={(e)=>{setState2(e.target.value)}}
        />
    
      <button>Update</button>
      </form>
  </div>
  )
}      

Here is the Codepen link

Thank You

CodePudding user response：

In the updateEmployee function, you're spreading the value of the entire state, that needs to be item.

function updateEmployee(id, newName){
  console.log('Hello from function updateEmployee')
  
  const checkingEmployees = state.map((item) => {
    if (id == item.id){
      return { ...item, name: newName } // <-- here
    }
    return item; // <-- here
  })

  setState(checkingEmployees);
}