I want this "item.id" value in "details.js" file. "item.id" is coming from "application.js" file.

Here is the code of "application.js" :

import React from "react";
import axios from "axios";
import { useEffect, useState } from "react";
import Table from "@material-ui/core/Table";
import { useHistory } from "react-router-dom";
import TableCell from "@material-ui/core/TableCell";
import { Button, TableHead, TableRow } from "@material-ui/core";
import { TableBody } from "@material-ui/core";

const PendingApplication = () => {
  let history = useHistory();
  const [data, setData] = useState([]);
  const handleClick = (location) => {
    console.log(location);
    history.push(location);
  };

  useEffect(() => {
    axios
      .get("http://localhost:5000/api/kam")
      .then((response) => {
        console.log(response);
        setData(response.data.kamData);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="content">
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Ticket No</TableCell>
            <TableCell align="right">Category</TableCell>
            <TableCell align="right">Sub Category</TableCell>
            <TableCell align="right">Request Time & Date</TableCell>
            <TableCell align="right">Company Name</TableCell>
            <TableCell align="right">Action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((item, index) => (
            <TableRow key={index}>
              <TableCell>{item.ticketno}</TableCell>
              <TableCell>{item.approvecategory}</TableCell>
              <TableCell>{item.subcategory}</TableCell>
              <TableCell>{item.date}</TableCell>
              <TableCell>{item.companyname}</TableCell>
              <TableCell>
                <Button onClick={() => handleClick("/detail", `${item._id}`)}>
                  Detail
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

export default PendingApplication;

And this is the code of "detail.js" :

import React from "react";
import axios from "axios";
import { useEffect, useState, useContext } from "react";
import { useHistory, useParams } from "react-router-dom";
import Box from "@mui/material/Box";
import { SetPopupContext } from "../../App";
import { Button, TableRow } from "@material-ui/core";

const Details = () => {
  const { _id } = useParams();
  const [buttonText, setButtonText] = useState("APPROVE");
  const changeText = (text) => setButtonText(text);
  const setPopup = useContext(SetPopupContext);
  let history = useHistory();
  const [data, setData] = useState([]);
  
  useEffect(() => {
    axios
      .get(`http://localhost:5000/api/kam/${_id}`)
      .then((response) => {
        console.log(response);
        setData(response.data.kamData);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div className="content">
      <Button onClick={() => changeText("APPROVED")}>{buttonText}</Button>
      <Button>Revert Back</Button>
      <Button>Reject</Button>
      <Box
        sx={{
          width: "90%",
          padding: "24px 20px", // theme padding
          border: "1px solid rgba(0, 0, 0, 0.12)",
          borderRadius: 4,
        }}
      >
        <div className="ticket-details">
          <h3>TICKET DETAILS</h3>

          <TableRow>
            <p>Ticket ID: {data.ticketno}</p>
            <p>Category: {data.approvecategory}</p>
            <p>Category: {data.subcategory}</p>
            <p>Category: {data.date}</p>
          </TableRow>
        </div>
        <div className="additional-info">
          <h3>ADDITONAL INFO</h3>

          <TableRow>
            <p>Company Name: {data.companyname}</p>
            <p>KCP Name: {data.kcpname}</p>
            <p>KCP Contact No: {data.kcpcontact}</p>
            <p>KCP NID No: {data.kcpnid}</p>
            <p>No of MSISDN: {data.msisdn}</p>
          </TableRow>
        </div>
      </Box>
    </div>
  );
};

export default Details;

Basically in "application.js" file I am fetching all the data and showing those data in a table when a user clicks on the "detail" button it should carry the "item._id" value and redirect to "detail.js" file. In "detail.js" file I have an "axios .get(http://localhost:5000/api/kam/${_id})" this is an API that I created in the backend. I want data by specific id, the specific id is coming from "application.js" file.

Here is the API for fetching data by ID:

router.get("/kam/:id", (req, res) => {
  console.log(req.params.id);
  kamForm
    .findById(req.params.id)
    .then((result) => {
      res.status(200).json({
        kamData: result,
      });
    })
    .catch((err) => {
      console.log(err);
      res.status(500).json({
        message: err,
      });
    });
});

I am stuck with this problem for the last three days, can anyone fix this?

CodePudding user response：

your handleClick(location) function is accpting only one parameter So it should be called like this

<Button onClick={() => handleClick(`/detail/${item.id}`)}>
   Detail
</Button>

CodePudding user response：

you are not reading the Id in handleClick callback

In application.js -

const handleClick = (location,id) => {
        history.push({
  pathname: '/location',
  search: '?_id=id'
})
};