How to render API data in ReactJs by unique ID?

Question

I have a page where every data saved in the database is rendering in a table with very limited information, I have an action button (Detail) to view all the information for the particular company.

Code for the table:

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 color="#71BD44" onClick={() => handleClick('/detail')}>
                                    Detail
                                </Button>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default PendingApplication;

Here is the code for detail page:

const Details = () => {
    const setPopup = useContext(SetPopupContext);
    let history = useHistory();
    const [data, setData] = useState([]);
    const handleClick = (location) => {
        console.log(location);
        history.push(location);
    };
    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">
            <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>
                    {data.map((item, index) => (
                        <TableRow>
                            <p>Ticket ID: {item.ticketno}</p>
                            <p>Category: {item.approvecategory}</p>
                            <p>Category: {item.subcategory}</p>
                            <p>Category: {item.date}</p>
                        </TableRow>
                    ))}
                </div>
                <div className="additional-info">
                    <h3>ADDITONAL INFO</h3>
                    {data.map((item, index) => (
                        <TableRow>
                            <p>Company Name: {item.companyname}</p>
                            <p>KCP Name: {item.kcpname}</p>
                            <p>KCP Contact No: {item.kcpcontact}</p>
                            <p>KCP NID No: {item.kcpnid}</p>
                            <p>No of MSISDN: {item.msisdn}</p>
                        </TableRow>
                    ))}
                </div>
            </Box>
        </div>
    );
};

export default Details;

I have created the API for unique ID, Here is the API:

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

After clicking the detail button i want that particular info in detail page, can anyone help me, how to do that?

Answer 1

In your Database, you must have an id column, send that column also with your data into fetch API. In your code, you will get item.id, use that id for the handleClick button.

see below code.

const PendingApplication = () => {
    let history = useHistory();
    const [data, setData] = useState([]);
    const handleClick = (id) => {
        console.log(id);
       //use id here 
        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(item.id)}>
                                    Detail
                                </Button>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default PendingApplication;