How to pass a value from one function to another in a functional component?

Question

React

You need to delete a row from the table, but before deleting show a modal with a warning. How can the modal itself find out the ID of the table row being deleted?

const Component = ({ rows }) => {
      const [modalIsVisible, setModal] = false;

      const deleteRow = () => {
        // how to get id of row to delete here?
      }

      return (
        <div>
          <table>
            {rows.map(row => (
              <tr>
                <td>
                  <div>row of id {row.id}</div>
                  <button onClick={() => setModal(true)}>Delete row</button>
                </td>
              </tr>
            )}
          </table>
          <Modal isVisible={modalIsVisible}>
            <button onClick={deleteRow}>Delete anyway</button>
            <button onClick={() => setModal(false)}>Close</button>
          </Modal>
        </div>
      )
    }

I thought, of course, to create a separate state variable using useState, but I don’t like this approach, because The ID of the deleted line is purely system information that does not affect the display in any way and should not cause a rerender.

Answer 1

The ID of the deleted line is purely system information that does not affect the display in any way

Why, it can easily influence: Well, in general, useRef will help you :
const [ delId, setDelId ] = useState(null);
<button onClick={() => setDelId(row.id)}>Delete
<Modal isVisible={!!delId}>
<button onClick={() => setDelId(null)}>Close

The useRef() Hook isn't just for DOM refs. The “ref” object is a generic container whose currentproperty is mutable and can hold any value, similar to an instance property on a class.