How to get url with an ID using useEffect in Reactjs

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

Your functions recieves props as the first argument, so you access the `id` passed to it via that: `function EventAndComments(props) { const id = props.id; ...}` — kaveh, Aug 14 '20 at 19:46
Thank you @kaveh I used props as a parameter in the function and it worked. — Chukwuma Kingsley, Aug 15 '20 at 10:57

score 0 · Answer 1 · answered Jun 20 '22 at 12:52

0

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

answered Jun 20 '22 at 12:52

Thùy Nguyên Lê

1

How to get url with an ID using useEffect in Reactjs

1 Answers1