score:0

Accepted answer
import React, {useState, useCallback} from "react";

const App = () => {
  const [rows, setRows] = useState([
    {id: 1, value: ""},
    {id: 2, value: ""},
    {id: 3, value: ""}
  ]);

  const handleRowValueChange = useCallback(index => ({currentTarget: {value}}) => {
    setRows(rows.map((row, rowIndex) => {
      if (rowIndex === index) {
        return {
          ...row,
          value
        };
      }

      return row;
    }));
  }, [rows]);

  return (
    <table>
      <tbody>
        {rows.map((row, index) => (
          <tr key={row.id}>
            <td>
              <input value={row.value} onChange={handleRowValueChange(index)} />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default App;

score:0

let handleChange = (e)=>{
    let {name,value}=e.target;
    const newData = data.map((ele,id)=>{
        return { ...fvalues[id], [name]: value };
        // setFvalues(fvalues[id].name)
    })
    setFvalues(newData);
    console.log(name,value);
}

score:1

const [state, setState] = useState([{mobile:'',age:'',emailId:'',destinationAddress:'',destinationPin:''}]);

let handleChange = e => {
   const {name, value} = e.target;
   const stateClone = state.map((item, i) => ({...state[i], [name]: value }))
   // do what you want to this new array
   setState(stateClone); // update the state array with the new values


}

Related Query

More Query from same tag