React Router - How to route to a specific path within a loop - reactjs

Question

I am bit stuck and cannot find any similar issue.
In my application, I am looping over some data that I need to render but I am not sure how to use react-router in this case.
I would like to access to the project.pathname field in order to redirect to my Link.
But I am pretty sure its the wrong way.
All my routes are defined in my App.js file already but how to access this here ?
Here is my code snippet:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { withStyles } from '#material-ui/core/styles'
import Grid from '#material-ui/core/Grid'
import Typography from '#material-ui/core/Typography'
import Button from '#material-ui/core/Button'
// import Staces from '../assets/staces.png'
import SteffProject from '../assets/steffProject.jpg'
import AxtradeProject from '../assets/axtradeProject.jpg'
import HotspawtsProject from '../assets/hotspawtsProject.jpg'
import IbizaProject from '../assets/ibizaProject.jpg'
import CdaProject from '../assets/cdaProject.png'
const projectImages = [
{
img: CdaProject,
projectName: 'CARRE DARTISTES',
headline: 'Artist’s shop Back office ',
type: 'Web application',
id: 1,
pathname: '/AboutMe'
},
{
img: IbizaProject,
projectName: 'IBIZA',
headline: 'Accounting Platform ',
type: 'Web application',
id: 2,
pathname: '/Ibiza',
},
{
img: SteffProject,
projectName: 'STEFF',
headline: 'Deliveries Management',
type: 'Mobile application',
id: 3,
payhname: '/Steff',
},
{
img: HotspawtsProject,
projectName: 'HOTSPAWTS',
headline: 'Dog Sitting Platform ',
type: 'Mobile application',
id: 4,
pathname: '/Hotspawts',
},
{
img: AxtradeProject,
projectName: 'AXTRADE',
headline: 'Brokers platform ',
type: 'Web application',
id: 5,
pathname: '/Axtrade',
},
]
#withStyles((theme) => ({ // eslint-disable-line
projectPage: {
marginTop: 5,
backgroundColor: '#eee',
},
container: {
position: 'relative',
},
projectImage: {
width: '100%',
height: 'auto',
filter: 'grayscale(100%)',
},
title: {
color: '#fff',
position: 'absolute',
top: 20,
left: 10,
},
subheading: {
color: '#fff',
position: 'absolute',
top: 40,
left: 10,
},
caption: {
color: '#fff',
position: 'absolute',
top: 60,
left: 10,
},
display1: {
textAlign: 'center',
marginBottom: 20,
marginTop: 20,
},
raised: {
backgroundColor: '#424246',
marginTop: 10,
color: '#fff',
},
projectButton: {
position: 'absolute',
bottom: 10,
right: 10,
color: '#fff',
},
}))
export default class Projects extends Component {
static propTypes = {
classes: PropTypes.any.isRequired, // eslint-disable-line
}
render() {
const { classes } = this.props
return (
<Grid container className={classes.projectPage} alignItems="center" direction="column">
<Grid item>
<Typography className={classes.display1} variant="display1">Latest Projects</Typography>
</Grid>
<Grid item>
{projectImages.map(project => (
<div className={classes.container}>
<img
className={classes.projectImage}
key={project.id}
src={project.img}
alt={project.title}
/>
<Typography
className={classes.title}
variant="title"
>
{project.projectName}
</Typography>
<Typography className={classes.subheading} variant="subheading">{project.headline}</Typography>
<Typography className={classes.caption} variant="caption">{project.type}</Typography>
<Button className={classes.projectButton} component={Link} to={project.pathname}>project details</Button>
</div>
))}
</Grid>
<Grid item>
<Button className={classes.raised} size="medium" variant="raised">View more projects</Button>
</Grid>
</Grid>
)
}
}

Answer 1

You have typo in
{
img: SteffProject,
projectName: 'STEFF',
headline: 'Deliveries Management',
type: 'Mobile application',
id: 3,
payhname: '/Steff',
}
It should be pathname. I believe your code should work after fixing it.