1

I have bootstrap cards with posts in a file called activities.js. I want to be able to click on the image on the card and route to a new page with all the post details. I created a new component called detail.js, and I am just having trouble with the routing to the new file.

Here is my code in activities.js:

`

import React from 'react'
import Card from 'react-bootstrap/Card';
import "bootstrap/dist/css/bootstrap.min.css";

export const Activities = ({ activityListings, loading }) => {
  if (loading) {
    return <h1>Loading...</h1>;
  }
  return (
    <div className="activities-container">
      {
        activityListings.map(activity => { 

          let description = activity.blurbs[1].value;

          if (description.split(' ')[0] === "-") {
            description = description.replace('-', '');
          }
          return (
            <Card key={activity.name}>
              <Card.Body>
                <Card.Img variant="top" src={activity.images[0]} />
                <Card.Title>{activity.name}</Card.Title>
                <Card.Subtitle className="mb-2 text-muted">
                  {description.split(' ').slice(0, 10).join(' ') + ( " ...")}
                  </Card.Subtitle>
                  <span className="rating"><i className="fa fa-star"></i>
                  {Math.round(activity.reviewMeta?.avgRating * 100) / 100}
                  </span>                 
                  <br></br>
                <Card.Text className="card-location">
                  {activity.primaryRegion?.name}
                </Card.Text>
              </Card.Body>
            </Card>
            )
          }  
        )
      }
  </div>
  )
}

` The issue is that I am not certain where to add the line of code to direct to detail.js. I have tried adding all the routing in App.js, and I cannot figure out how to use the /:id syntax to get the current clicked post and display the post information on another page.

Charlotte M
  • 31
  • 2
  • what is the issue/challenge you are facing ? do you see any errors or required a help on particular functionality ? please try to add more info see [how to ask a good Q](https://stackoverflow.com/help/how-to-ask) ... thanks – KcH Nov 01 '22 at 17:41
  • I tried to update with the issue I am facing. I don't see any errors quite yet, basically because I have spent hours and am struggling on how to implement it in the first place. I've tried to use useNavigate() as well, and I think there is just something I am missing – Charlotte M Nov 01 '22 at 17:49
  • you can use `useNavigate` hook and add a onClick on image and send the `id` or w/e data that gets the details of post .. [May be this might help you](https://stackoverflow.com/a/59701168/11737596) – KcH Nov 01 '22 at 17:53

0 Answers0