passing Props through link componet

this is my line of code where iam mapping some items fetching from API

<div style={{ display:"flex",flexWrap:"wrap",justifyContent:"center"}}>
{games.length===0?<p className='nomatch'>No Matching Results</p>:games.map(({title,thumbnail,id,gameurl,freetogame_profile_url,platform,short_description,publisher,developer
})=>{

  return <div  key={id} style={{display: 'flex', justifyContent: 'center'}} >
  <div style={{width: '300px', height: '300px', backgroundColor: '#fff',margin:"20px", borderRadius: '5px', display: 'flex', flexDirection: 'column', alignItems: 'center', boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',border:"2px solid rgb(245, 6, 133)"}}>
    <img src={thumbnail} alt="Game 1" style={{width:"297px",height:"187px"}} />
    <h3 style={{textAlign: 'center'}}>{title}</h3>
    <div style={{display: 'flex', justifyContent: 'space-around',marginTop:"12px",  width: '100%'}}>
    <Link to={{
  pathname: `/games/${id}`,
  state: {short_description:short_description}
}}>
      <button style={{backgroundColor: 'rgb(245, 6, 133)', color: '#fff', padding: '10px 20px', borderRadius: '5px', border: 'none', cursor: 'pointer'}}>View</button>
     </Link>

When we click link componet we will be directed to GameDetail.js Componet in my app how i will used these state values in my GameDetail.js Componet plz help me if there is any particular concept

Blog

passing Props through link componet

Abdul Moiz Sheraz

Join Our Newsletter. No Spam, Only the good stuff.

Related