0

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>
Vairamuthu M
  • 53
  • 5
  • Note: if I use doubleclick it still needs to show the data previously until I change it to the new value in the cell. – Vairamuthu M Aug 10 '22 at 13:08

1 Answers1

0

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.

Raphael Ben Hamo
  • 146
  • 8
  • Your right! @Raphel Ben Hamo but the thing is that I am not sure about how to write a function to save it in the database. because I have worked on frontend only, my project now was full stack and another member works for backend in flask. So it was a new task. Could you help with a function that can update the value and store it in the database. – Vairamuthu M Aug 10 '22 at 13:04
  • Hi sure basically you should send the backend the whole object and in flask, you do update to the row by the ID in the object, here's an example https://stackoverflow.com/questions/6699360/flask-sqlalchemy-update-a-rows-information – Raphael Ben Hamo Aug 10 '22 at 13:25
  • If that helps you mark the answer as 'answered' please :) – Raphael Ben Hamo Aug 10 '22 at 13:27