React: input fields not updating text

Question

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

Laci556 · Accepted Answer · 2022-10-16 12:28:03Z

1

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

answered Oct 16, 2022 at 12:28

Laci556

16210 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: input fields not updating text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related