Как в React передать данные по клику в модальное окно?

Question

У меня есть таблица с заявками на React. Моя задача состоит в том, чтобы по клику на одну из заявок открывалось модальное окно именно с теми данными, которые непосредственно относятся к этой заявке. В модалке я могу подробнее посмотреть данные заявки и отредактировать их. Сейчас мой App.js выглядит так:

import "./App.css";
import TableContainer from "./containers/TableContainer";
import RequestFormContainer from "./containers/RequestFormContainer";
import { Route } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Route path="/" exact component={TableContainer} />
      <Route path="/request/:id?" exact component={RequestFormContainer} />
    </div>
  );
}

export default App;

TableContainer только возвращает компонент Table и передает ему данные по заявкам из Redux. Вот как выглядит Table:

import React from "react";
import classes from "./Table.module.css";
import { NavLink } from "react-router-dom";

function Table({ tableData }) {
  return (
    <>
      <div className={classes.add_btn}>Создать</div>

      <table className={classes.table}>
        <thead>
          <tr>
            <th>Номер заявки</th>
            <th>
              Дата и время
              <i className="fas fa-sort"></i>
            </th>
            <th>
              Фирма
              <i className="fas fa-sort"></i>
            </th>
            <th>
              ФИО перевозчика
              <i className="fas fa-sort"></i>
            </th>
            <th>Номер телефона</th>
            <th>Комментарии</th>
            <th>ATI код сети </th>
            <th>Опции </th>
          </tr>
        </thead>
        <tbody>
          {tableData.map((request) => {
            return (
              <tr key={request.id}>
                <td>{request.id}</td>
                <td>{request.date}</td>
                <td>{request.company_name}</td>
                <td>{request.fullName}</td>
                <td>{request.phone}</td>
                <td>{request.comments.length}</td>
                <td>{request.ATI_code}</td>
                <td>
                  <NavLink to={`/request/${request.id}`}>Ред.</NavLink>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </>
  );
}

export default Table;

При нажатии на кнопку Ред. у меня открывается модальное окно. Как передать в него данные из той заявки, на которую я кликнула? И если ли возможность обернуть всю строку таблицы в NavLink, чтобы клик на строчку открывал мне модальное окно, а не создавать отдельно столбец с опциями?

Answer 1

Например так:

const Component = () => {

  const [modalVariant, setModalVariant] = useState("")
  const [isOpen, setIsOpen] = useState(false)

  const setModal = (variant) => { // устанавливает вариант модалки
    setModalVariant(variant)
  }

  const getModal = () => { // определяет какую модалку отрендерить на основе стейта modalVariant
    switch(modalVariant) {
      case 'value1':
        return <Component />
    
      case 'value2':
        return <Component2 />
    
      default:
        return <Component3 />
    }
  }
  return (
    <>
      {isOpen && <Modal>{getModal()}</Modal>} // проверяем, открыта ли модалка с помощью стейта isOpen, рендерим модалку на основе результата getModal
      <Button onClick={() => setModal(someVariant)} /> // прокидываем в setModal нужный вариант открытия модалки
    </>
  )
}

БЛОГ НА HUSL

Как в React передать данные по клику в модальное окно?

Ответы (1 шт):