React-Router Id paramter

I’m trying to dynamically render each blog post using react-router. Im fetching both blogs from Contentful API. The BlogCards component is being used to render the blogs via cards. How do I dynamically render each blog using their id?

import React from 'react'
import '../BlogCards/BlogCard.scss'
import {Link}from 'react-router-dom'

function BlogCards() {
    return (
            <>
          
        <div className="blog-card__info">
          <h5>HARVICK GETS WHAT HE NEEDS, JOHNSON AMONG THOSE</h5>
        </div>
        <Link to='/blog'>
        <a href="#" className="btn btn--with-icon"><i className="btn-icon fa fa-long-arrow-right"></i>READ MORE</a>
        </Link>

    </> 
    )   
}

export default BlogCards
return (
        <div>
          <h1 className="header">Blog</h1>
          {blogs.map((blog)=>
            <Article key={blog.sys.id} title={blog.fields.title} introduction={blog.fields.introduction} mainBody1={blog.fields.mainBody1} mainBody2={blog.fields.mainBody2}  />
          )}
        </div>
    )

Source: React Router Questions

LEAVE A COMMENT