How to get url with an ID using useEffect in Reactjs - node.js

Question

I am working on a Mernstack application, in my application I have and Event Model and I want to show a single event when I click the event as a link.
the challenge that I am facing now is how to load a single event API with useEffect. it is working when I use componentDidMount but now I changed my application to use useEffect. with ComponentDidMount I used this.props.match.params.id to get the ID, but now that I am using useEffect, I don't know how to get the ID so that I can display a single event with the details and comments that are associated to it.
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import AddComingWithModal from "../components/coming-with-modal.component";
import { makeStyles } from "#material-ui/core/styles";
import clsx from "clsx";
import Card from "#material-ui/core/Card";
import CardHeader from "#material-ui/core/CardHeader";
import CardMedia from "#material-ui/core/CardMedia";
import CardContent from "#material-ui/core/CardContent";
import CardActions from "#material-ui/core/CardActions";
import Collapse from "#material-ui/core/Collapse";
import Avatar from "#material-ui/core/Avatar";
import IconButton from "#material-ui/core/IconButton";
import Typography from "#material-ui/core/Typography";
import { red } from "#material-ui/core/colors";
import FavoriteIcon from "#material-ui/icons/Favorite";
import ShareIcon from "#material-ui/icons/Share";
import ExpandMoreIcon from "#material-ui/icons/ExpandMore";
import MoreVertIcon from "#material-ui/icons/MoreVert";
import { useTheme } from "#material-ui/core/styles";
import useMediaQuery from "#material-ui/core/useMediaQuery";
export default function EventAndComments() {
const theme = useTheme();
const [tileData, setTileData] = useState([]);
const useStyles = makeStyles((theme) => ({
root: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: "56.25%", // 16:9
},
expand: {
transform: "rotate(0deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
},
expandOpen: {
transform: "rotate(180deg)",
},
avatar: {
backgroundColor: red[500],
},
}));
const classes = useStyles();
const [expanded, setExpanded] = React.useState(false);
const handleExpandClick = () => {
setExpanded(!expanded);
};
useEffect((id) => {
axios
.get(
"http://localhost:9000/events/" +
this.props.match.params.id +
"/eventcomments"
)
.then((response) => {
setTileData([...response.data]);
})
.catch(function (error) {
console.log(error);
});
}, []);
return (
<Card className={classes.root}>
<CardHeader
avatar={
<Avatar aria-label="recipe" className={classes.avatar}>
R
</Avatar>
}
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
title={tileData.title}
subheader="September 14, 2016"
/>
<CardMedia
className={classes.media}
image="/static/images/cards/paella.jpg"
title="Paella dish"
/>
<CardContent>
<Typography variant="body2" color="textSecondary" component="p">
This impressive paella is a perfect party dish and a fun meal to cook
together with your guests. Add 1 cup of frozen peas along with the
mussels, if you like.
</Typography>
</CardContent>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites">
<FavoriteIcon />
</IconButton>
<IconButton aria-label="share">
<ShareIcon />
</IconButton>
<IconButton
className={clsx(classes.expand, {
[classes.expandOpen]: expanded,
})}
onClick={handleExpandClick}
aria-expanded={expanded}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expanded} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>Method:</Typography>
<Typography paragraph>
Heat 1/2 cup of the broth in a pot until simmering, add saffron and
set aside for 10 minutes.
</Typography>
<Typography paragraph>
Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet
</Typography>
<Typography paragraph>
Add rice and stir very gently to distribute. Top with artichokes and
</Typography>
<Typography>
Set aside off of the heat to let rest for 10 minutes, and then
serve.
</Typography>
</CardContent>
</Collapse>
</Card>
);
}

Answer 1

You can use useParams()
const { id } = useParams()
instead of this.props.match.params.id