How to pass this item.id value into axios.get('http://localhost:5000/api/kam/:Id')

Question

I have a page called "application.js". Where I fetch all the data from the database. I have another page called "detail.js". Where I want to redirect by clicking the "DETAIL" button from "application.js". Into "detail.js" I have to fetch the data by ID. The ID must be that particular item that I have clicked from "application.js" file. I want "item.id" value instead of /:id into axios.get('http://localhost:5000/api/kam/:Id').

As you can see how the data represented in "application.js". When I clicked on the "DETAIL" button it should carry item.id value.

Here is the code for the "application.js":

const PendingApplication = () => {
  //const { job } = props;
  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
                  color="#71BD44"
                  onClick={() => handleClick(`/detail/${item.id}`)}
                >
                  Detail
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
};

export default PendingApplication;

When you click on this Button, it's going to exact ID address in browser.

<Button color="#71BD44" onClick={() => handleClick(`/detail/${item.id}`)}>
  Detail
</Button>

But I want this ${item.id} value into this axios instead of :id:

useEffect(() => {
  axios
    .get("http://localhost:5000/api/kam/:id")

    .then((response) => {
      console.log(response);
      setData(response.data.kamData);
    })
    .catch((error) => {
      console.log(error);
    });
}, []);

This useEffect code is from "detail.js".

Can anyone help me? How to do that?

Answer 1

Assuming the Details component has access to the id route match param you can use a string template to "inject" the id value.

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

If you are using react-router-dom then you can use the generatePath utility to generate the GET request URL.

import { generatePath } from 'react-router-dom';

...

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

To get access to the id route match param, import the useParams React hook.

import { useHistory, useParams } from 'react-router-dom';

...

const { id } = useParams();

Answer 2

 useEffect(() => {
        let { id } = useParams();
        axios
            .get(`http://localhost:5000/api/kam/${id}`)

            .then((response) => {
                console.log(response);
                setData(response.data.kamData);
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);