I have a table that each row that has some td that here these 2 td are important for me and I want to change them: name & family. I want to change each name or family td when the user clicks on it. how can I handle this event?

this is my table td :

finalList.map((i, index) => {
  return (
    <tr className="contactItem" id={i.id} key={i.id}>
      <td>{String(index + 1).padStart(2, "0")}).</td>
      <td id="editName" onClick={(e) => inlineEditHandler(e, i.name)}>{i.name}</td>
      <td id="editFamily" onClick={(e) => inlineEditHandler(e, i.family)}>{i.family}</td>
      <td>
        {String(i.numbers[0]).substring(7, 11) +
          "***" +
          String(i.numbers[0]).substring(0, 4)}
      </td>
      <td className="itemBTNS">
        <button
          className="deleteBTN"
          onClick={() => contactDeleteHandler(i.id)}
        >
          X
        </button>
        <button
          className="editBTN"
          onClick={() => contactEditHandler(i)}
        >
          Edit
        </button>
      </td>
    </tr>
  );
})

I want to set this event for the second and third td. And note that I don't want to use the contentEditable attribute.

  inlineEditHandler = (e, i) => {
    this.setState({
      [e.target.id]: i,
    });
  };

editName and editFamily are my states. What should I do in the inlineEditHandler function or other stuff to change the tagName from td to input or something like this?