reactjs – Axios Modal in React JS


I have a project in React JS and I use axios for fetch data from API with node JS and framework Express JS. I have many data axios get and I want to display the detailed data with the modal. but I can’t get id data for get detail data. I used function filter for filter data by id. Does anyone help me?

const ListTransaction = () => {
  const (isModalBooking, setModalBooking) = useState(false);

  const config = {
    headers: {
      Authorization: `Bearer ${localStorage.token}`,
    },
  };

  const (transactions, setTransaction) = useState(());
  const fetchTransactionList = async () => {
    try {
      const response = await axios.get(
        "http://localhost:5001/api/v1/transaction",
        config
      );
      const result = response.data.data;
      setTransaction(result);
    } catch (error) {
      const message = transactions.error.message;
    }
  };

  const showModalBooking = () => {
    setModalBooking(!isModalBooking);
  };

  useEffect(() => {
    fetchTransactionList();
  });
return (
...........
<td>
                <img
                  src={search}
                  alt=""
                  style={{ cursor: "pointer" }}
                  onClick={() => {
                    showModalBooking();
                  }}
                  key={transaction.id}
                />
              </td>
.........................
{isModalBooking && (
        <ModalBooking
          showModalBooking={showModalBooking}
          transactions={transactions}
        />
      )}

this list data

const ModalBooking = ({ showModalBooking, transactions, id }) => {
  let history = useHistory();
  const (dataDetail, setDetail) = useState(());
  console.log(id);

  const config = {
    headers: {
      Authorization: `Bearer ${localStorage.token}`,
    },
  };

  const tour = transactions.filter((detail) => {
    return detail.userId == id;
  });

  const fetchDetailTrip = async () => {
    const response = await axios.get(
      `http://localhost:5001/api/v1/transaction/${id}`,
      config
    );
    const resData = response.data.data;
    setDetail(resData);
  };

  useEffect(() => {
    fetchDetailTrip();
  });
...........................................
```