aleksand44
@aleksand44

Как передать значение из одной ф-ции в другую в функциональном компоненте?

Нужно удалить строку из таблицы, но перед удалением показать модалку с предупреждением. Как самой модалке можно узнать айдишник удаляемой строки таблицы?

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>
      )
    }

Думал конечно отдельную переменную состояния создать с помощью useState, но мне этот подход не нравится, т.к. айдишник удаляемой строки это сугубо системная информация, никак не влияющая на отображение и не должна вызывать ререндер.
  • Вопрос задан
  • 90 просмотров
Решения вопроса 1
0xD34F
@0xD34F
айдишник удаляемой строки это сугубо системная информация, никак не влияющая на отображение

Почему же, запросто может влиять:

const [ delId, setDelId ] = useState(null);

<button onClick={() => setDelId(row.id)}>Delete

<Modal isVisible={!!delId}>

<button onClick={() => setDelId(null)}>Close

Ну а вообще, useRef вам в помощь:

The useRef() Hook isn’t just for DOM refs. The “ref” object is a generic container whose current property is mutable and can hold any value, similar to an instance property on a class.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы