Specific page route in ReactJS via JSON Id - json

Question

I want to route to a specific page and show a specific JSON Object. If JSON Object contains ID: 1 then it should go to localhost:300/users/1 and show the data of Id 1. I have also mapped another JSON which contains addresses of users and this is I have done so far.
User.jsx
import React from "react";
import users from "../data/PersonData.json";
import adresses from "../data/StreetAddress.json";
class Users extends React.Component {
constructor(props) {
super(props);
this.state = {
Users: []
};
}
render() {
const result = {
Users: users.User.map(user => ({
...user,
adresses: adresses.StreetAddress.filter(
adr => adr.PersonId === user.Id
).map(({ PersonId, ...rest }) => rest)
}))
};
return <div id="users"> {JSON.stringify(result)} </div>;
}
}
export default Users;
and it results into whole JSON Object mapped with address, How can I route it to specific ID i.e. Id which is in
PersonData.json
{
"User": [
{
"BossId": 3,
"DateOfBirth": "1966-09-27T00:00:00",
"FamilyName": "Montejano",
"Gender": "Unspecified",
"GivenName": "Trinh",
"Id": 8,
"Title": "Tech Manager"
},
]
}
So when a user is routed to localhost:3000/users/8 it should show only specific data of user 8.

Answer 1

I solved this in the following way, I took the URL Parameters and got the ID from there and matched it with JSON Object which is looping.
In App.js
import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Users from "./Components/Users";
import User from "./Components/User";
class App extends React.Component {
render() {
return (
<div className="App">
<Router>
<>
<Switch>
<Route path="/users" name="users" component={Users} />
<Route path="/user/:id" name="user" component={User} />
</Switch>
</>
</Router>
</div>
);
}
}
export default App;
and in User.jsx
import React from "react";
import users from "../data/PersonData.json";
import adresses from "../data/StreetAddress.json";
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
Users: []
};
}
render() {
const result = {
Users: users.User.map(user => ({
...user,
adresses: adresses.StreetAddress.filter(
adr => adr.PersonId === user.Id
).map(({ PersonId, ...rest }) => rest)
}))
};
const params = this.props.match.params.id;
return JSON.stringify(result.Users[params]);
}
}
export default User;
I have reused the same code in the question.