Hi myself stuck with a part of my project. I have created the table in react and had fetched the api to show the data of the cells. But when i double click the table cell it should able to edit the data and if changes made it should be saved and updated to the database. I am not sure about the update function and how to edit the table cell on doubleClick. Please help me out to do this. I'll share my some of the codes.

  <tr>
   <th>
    <div className="td1">Concept</div>
       </th>
        {data.Concept.map((item, i) => {
            return (
                  <td {"This cell needed to be edited on doubleClick"}>
                       <div className="mx-3 td2" key={i}>
                            {item ? item : "-"}
                          </div>
                        </td>
                      );
                    })}
                    <td className="td1">
                      <div className="">
                        <button
                         {'This is the save button that should update the value to the database"}
                          type="button"
                          className="btn btn-warning p-2 td1 border "
                        >
                          <i className="bi bi-arrow-repeat"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                  

CodePudding user response：

You can do something like that, this way:

1. create a function for double click and add it to doubleClick event on the specific cell.

2. the function triggered input field (or TextField whatever you're using) you can do it in many ways, f.e. make it disable all the time until the user triggered the double click event.

3. update the object that contains all fields and change the specific field by the name of the field. f.e. send to the function 'userName' (the key) and the , then in the set state put the user name as a parameter like this - [key]: value. here's example

let me know if that helps you.

CodePudding user response：

You have the id of the cell that you're wanting to be able to edit and save changes from so you could have a state for editingCell via useState along the lines of {id: "", content: ""} and have the table cell set the id of the cell on double click, and use that logic to display an input etc (i.e if (id === editingCell.id) ...). When the content is changed, update the state then just use the save button to send whatever the current state of editingCell is to your backend or match it back up with the original list of data by using the id you saved earlier. I've created a rough example below as a baseline for you:

const [editingCell, setEditingCell] = useState({id: "", content: ""});
const saveData = () => if (editingCell.id) postToBackEndOrMatchWithData(editingCell); 

<div id="dbl-click" onClick={() => setEditingCell({id})}>
  {editingCell.id 
    ? <input onChange={(e) => setEditingCell({...editingCell, e.target.value}) 
    : null}
</div>
<button id="save" onClick={() => saveData()}>Save</button>