Dynamically add and remove input elements with React

The best approach is probably to create a controlled component that handles all the logic for the editable cell, and store the values in the parent. I made a sandbox that you can check out here, but I'll add the code here as well.

That way the cell component provides all the view stuff needed, and the parent controls the logic and data for all the cells.

So, the editable cell handles the functionality of switching between views:

const EditableCell = ({ id, onEdit, className, value }) => {
  const [isEditing, setIsEditing] = useState(false);

  const onClick = useCallback(() => {
    setIsEditing(true);
  }, []);

  const onFinishedEditing = useCallback(() => {
    setIsEditing(false);
  }, []);

  const onKeyDown = useCallback(
    (e) => {
      if (e.key === "Enter") {
        onFinishedEditing();
      }
    },
    [onFinishedEditing]
  );

  return (
    <td>
      {isEditing ? (
        <input
          value={value}
          onChange={(e) => onEdit(e.target.value, id)}
          onBlur={onFinishedEditing}
          onKeyDown={onKeyDown}
          autoFocus
        />
      ) : (
        <p {...{ id, className, onClick }}>{value}</p>
      )}
    </td>
  );
};

And then the app stores the cells' data and renders an EditableCell for each one:

export default function App() {
  // This stores the cells values and properties, you can
  // add or remove cells here are needed
  const [cellValues, setCellValues] = useState([
    { id: "1", class: "foo", value: "Boom" },
    { id: "2", class: "foo", value: "Bang" },
    { id: "3", class: "foobar", value: "Pew Pew" }
  ]);

  const onEdit = (value, id) => {
    setCellValues(
      cellValues.map((cellVal) =>
        cellVal.id === id ? { ...cellVal, value } : cellVal
      )
    );
  };

  return (
    <div>
      Click a cell to edit
      <tr>
        {cellValues.map((cellVal) => (
          <EditableCell
            id={cellVal.id}
            value={cellVal.value}
            className={cellVal.class}
            onEdit={onEdit}
          />
        ))}
      </tr>
    </div>
  );
}

This might not perfectly match with the functionality you're wanting, but should give you a starting point

I've been promise to myself that i will made good deed at least one per day.I know that you write in class way but i stick to hooks so much that... sorry man :P

it call onChange when during editing you will press enter.

import React, { Component, useEffect, useMemo, useRef, useState } from "react";
import "./styles.css";

const Td = ({ children, editable = false, onChange, className, id }) => {
  const cell = useRef();
  const [edit, setEdit] = useState(false);
  const [value, setValue] = useState(() => {
    while (typeof children !== "string") {
      children = children.props.children;
    }
    return children;
  });
  const [oldValue, setOldValue] = useState(value);

  useEffect(() => {
    if (!cell.current) return;
    const onEditMode = () => editable && setEdit(true);

    const target = cell.current;

    target.addEventListener("click", onEditMode);

    return () => {
      target.removeEventListener("click", onEditMode);
    };
  }, [cell, setEdit, editable]);

  const paragraph = useMemo(() => (
      <p id="1" className="foo">
        {value}
      </p>
    ),[value]);

  const input = useMemo(() => {
    const update = (value) => {
      setEdit(false);
      if (onChange && typeof onChange === "function") {
        onChange({
          id,
          newValue: value,
          oldValue: oldValue
        });
        setOldValue(value);
      }
    }

    return (
      <input
        value={value}
        onChange={ e => setValue(e.target.value)}
        onKeyDown={ e => e.key === "Enter" && update(value)}/>
      )
    },[value, setEdit, onChange, id, oldValue, setOldValue]);

  return (
    <td ref={cell} className={className}>
      {edit ? input : paragraph}
    </td>
  );
};

class App extends Component {
  componentDidMount() {
  }

  componentWillUnmount() {

  }

  tableCellValueChange({ id, newValue, oldValue }) {
    console.log(
      `table cell id: ${id} value changed from ${oldValue} to ${newValue}`
    );
  }

  render() {
    return (
      <div>
        <table>
          <thead></thead>
          <tbody>
            <tr>
              <Td 
                onChange={this.tableCellValueChange}
                id="special"
                editable>
                  <p>Bang </p>
              </Td>
              <Td onChange={this.tableCellValueChange} editable>
                <p>Bang</p>
              </Td>
              <Td editable={false} className="forbar">
                Pew Pew
              </Td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}

export default App;

here you have sandbox live example