James Moran James Moran - 1 month ago 7
Javascript Question

React-router - Choose data to be inserted onto component depending on Link clicked

I'm building a Portfolio using React and have a "ProjectPage" which I will be using as a template individual projects.

When a user clicks a "View project" button it will take them to the "ProjectPage", but I'm unsure how to change the data (e.g. title, images, description). What is the best way to do this?

I was thinking of using an array of objects, that would insert the data into the component.

Here is a link to my portfolio site on github: https://github.com/james2406/Portfolio

Thanks

Answer

Change the data depending on the route. You can use params like this:

<Route path="project/:projectId" component={ ProjectPage }></Route>

Then, inside the Project Page component, you can access that parameter like this:

this.props.params.projectId

Based on that value you can show the project title, image, and description. You can take that data from your stores.