Binding state to Route Switch - reactjs

Question

I am building a React app that fetches JSON data from an API call and feeds the response into an app state called menus [] as follows:
App.js
import React,{Component} from 'react';
import Menus from './components/menus';
class App extends Component {
state = {
menus: []
}
componentDidMount(){
fetch('api url')
.then(res => res.json())
.then((data)=> {
this.setState({menus: data})
})
.catch(console.log)
}
render(){
return (
<div>
<Menus menus={this.state.menus} />
</div>
);
}
}
export default App;
Im using the state in a simple component that contains a route switch as follows:
Menus.js
import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link, useParams } from "react-router-dom";
const Menus = ({ menus }) => {
return (
<Router>
<div>
<center><h1>Lessons</h1></center>
{menus.map((menu) => (
<li><Link to="{{menu.lessonContent}}">{menu.lessonName}</Link></li>
))}
<Switch>
<Route path="/:id" children={<Child />} />
</Switch>
</div>
</Router>
)
};
function Child() {
// We can use the `useParams` hook here to access
// the dynamic pieces of the URL.
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3> //content should show up here
</div>
);
}
export default Menus
Is there a way to bind a state element to the route so a different portion of the json response will be passed instead of a route? Can I use a key and somehow combine it with an element?
Here is what the link was originally:
<li><Link to="/route">{menu.lessonName}</Link></li>
and here is what I need it to be:
<li><Link to="{{menu.lessonContent}}">{menu.lessonName}</Link></li>

Answer 1

If I understand correctly what you are trying achieve, I think your Menus component should look more like this:
Menus.js
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useParams
} from "react-router-dom";
const Menus = ({ menus }) => {
return (
<Router>
<div>
<center>
<h1>Lessons</h1>
</center>
{menus.map(menu => (
<li key={menu.id}>
<Link to={`/${menu.id}`}>{menu.lessonName}</Link>
</li>
))}
<Switch>
{menus.map(menu => (
<Route
key={menu.id}
path="/:id"
children={<Child content={menu.content} />}
/>
))}
</Switch>
</div>
</Router>
);
};
function Child({ content }) {
let { id } = useParams();
return (
<div>
<h3>ID: {id}</h3>
<div>{content}</div>
</div>
);
}
export default Menus;
Here are some of the things I fixed here:
On your example you were passing a string instead of an object key to the to prop: to="{{menu.lessonContent}}" instead of to={menu.lessonContent}
I'm mapping over menus in order to dynamically create the Route components and their corresponding paths.
I'm passing menu.content as a prop to the Child component.
I added keys to every rendered element which is a result of iteration.