How to pass props through router - reactjs

Question

I have a list of task, on my dashboard, I want as soon as clicked on a task to get his details.
At the moment I can only retrieve the id of this task, but can't get other information.
When I console.log listTask on my parent component, I get an Array objects that contains all the task:
[ 0: Object { state: "Started", date: "2019-02-11T19:57:26.176Z", _id: "5c6074afd2f8eb5019fd5f54", … }
1: Object { state: "Started", date: "2019-02-11T19:57:26.176Z", _id:"5c60798bacf119510c19f5b1", … }
2: Object { state: "Started", date: "2019-02-11T19:57:26.176Z", _id: "5c607be3c11c2b529615ac26", … }
3: Object { state: "Started", _id: "5c607cfec27d6254c6fe0ca1", projectName: "I LOVE THIS GAME", … } ]
parentComponent.js
async componentDidMount() {
this._isMounted = true
let response = await fetch(`http://localhost:5001/userproject/${taskId}`)
let data = await response.json()
console.log(data) // will show me the array
const projects = data.map(pro => {
return {
id: pro._id,
state: pro.state,
projectName: pro.projectName,
consultants: pro.consultants,
ScrumMasterUsername: pro.scrumMaster.username,
ScrumMasterId: pro.scrumMaster._id,
}
})
return this.setState({
projects: { projects },
})
}
render() {
const { projects } = this.state
const list = (projects && projects.projects) || []
if (!projects) {
return null
}
return (
<div className="dashboard container">
<div className="row">
<div className="col s16 m7 darken-2">
<ProjectList
name={this.state.projects.projectName}
projects={list}
/>
</div>
<div className="col s12 m3 offset-m1">
<Notifications />
</div>
</div>
</div>
)
}
My problem: When tried to get the task details, it retrieves the id of this task and not the other detail:
import React from 'react'
const ProjectDetails = props => {
const id = props.match.params.id
console.log(props) // i can only get the id
return (
<div className="container section project-details">
<div className="card z-depth-0">
<div className="card-content">
<span className="card-title">Project Title - {id} </span>
</div>
</div>
</div>
)
}
export default ProjectDetails

Answer 1

This is how you should do it.
class App extends React.Component {
render() {
return (
<Router>
<div>
<Switch>
<Route path="/" component={Home} />
**<Route path="/about" render={(props) => <About {...props} isAuth={"Authenticated"} />} />**
<Route path="/topics" component={Topics} />
</Switch>
</div>
</Router>
);
}
}
The second route marked between stars, is the one where I am rendering the component and passing a prop isAuth={"Authenticated"}
The above prop will be available inside About component as
const About = (props) => {
return (
<div>
<h1>About={props.isAuth}</h1>
</div>
);
}
Hope this helps you!!