Tengo una tabla que cada fila tiene algunos td que aquí estos 2 td son importantes para mí y quiero cambiarlos: name y family . Quiero cambiar cada td de name o family cuando el usuario haga clic en él. ¿Cómo puedo manejar este evento?

esta es mi tabla 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> ); })

Quiero configurar este evento para el segundo y tercer td . Y tenga en cuenta que no quiero usar el atributo contentEditable .

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

editName y editFamily son mis estados. ¿Qué debo hacer en la función inlineEditHandler u otras cosas para cambiar el tagName de td a input o algo así?