Home > Net >  How to add an edit function to a table using ReactJS
How to add an edit function to a table using ReactJS

Time:09-30

I've been trying to make it work for days without success. I created a table using React, I added the ability to add a new person to the table, delete them. I want to add the ability to edit the people on the table.

     const [contacts, setContacts] = useContext(Context);
     const [addFormData, setAddFormData] = useState({
firstName: "",
lastName: "",
salary: "",
    });




const handleAddFormChange = (event) => {
     event.preventDefault();

   const fieldName = event.target.name;
const fieldValue = event.target.value;

const newFormData = { ...addFormData };
newFormData[fieldName] = fieldValue;

setAddFormData(newFormData);
 };

const handleAddFormSubmit = (event) => {
const newContact = {
  id: nanoid(),
  firstName: addFormData.firstName,
  lastName: addFormData.lastName,
  salary: addFormData.salary,
  };

const newContacts = [...contacts, newContact];
setContacts(newContacts);

setAddFormData(null); //            
  • Related