I am trying to display list using react Js. There are 3 grid, what I want is to have a list of cities first and when i click on it, I will get the user that have the same city and then when I click on users, I should get their details. There is an unassigned list item too which should show incase a user has no city name
...
import React from "react";
export default class App extends React.Component
{
constructor()
{
super();
this.state = {
city: {
id: [1, 2, 3],
name: ["a", "b", "c"]
},
user: {
id: [1, 2, 3, 4, 5],
name: ["q", "w", "e", "f", "g"],
cityId: [2, 1, 3]
},
detail: {
userId: [3, 2, 1, 4, 5],
address: ["usa", "china", "india", "UK", "Japan"]
},
marker: null
};
}
change(id) {
this.setState({ marker: id });
}
render() {
console.log(this.state);
return (
<Grid container>
{/* //city list */}
<Grid>
<List>
{this.state.city.id.map((id, index) => {
return (
<ListItem
key={id}
button
onClick={() => {
this.change(id);
}}
>
<ListItemText primary={this.state.city.name[index]} />
</ListItem>
);
})}
<ListItem
key="unassigned"
button
onClick={() => {
this.change("unassigned");
}}
>
<ListItemText primary={"unassigned"} key={"unassigned"} />
</ListItem>
</List>
</Grid>
{/* //list of users where they live */}
<Grid>
{this.state.city.id.map((cityId, index) => {
switch (this.state.marker) {
case cityId: {
return (
<List>
{this.state.user.id.map((userId, index) => {
if (cityId === this.state.user.cityId[index]) {
return (
<List>
<ListItem
key={userId}
button
onClick={() => {
this.change(String(userId));
}}
>
<ListItemText
primary={this.state.user.name[index]}
/>
</ListItem>
</List>
);
}
})}
</List>
);
}
case "unassigned": {
return (
<List>
{this.state.user.id.map((userId, index) => {
if (cityId !== this.state.user.cityId[index]) {
return (
<List>
<ListItem
key={userId}
button
onClick={() => {
this.change(String(userId));
}}
>
<ListItemText
primary={this.state.user.name[index]}
/>
</ListItem>
</List>
);
}
})}
</List>
);
}
default:
return null;
}
})}
</Grid>
{/* //details of users*/}
<Grid>
{this.state.detail.userId.map((userId, index) => {
switch (this.state.marker) {
case String(userId): {
return (
<List>
<ListItem
key={userId}
button
onClick={() => {
this.change(userId);
}}
>
<ListItemText
primary={this.state.detail.address[index]}
/>
</ListItem>
</List>
);
}
default:
return null;
}
})}
</Grid>
</Grid>
);
}
}
...
I have tried implementing this on code sandbox, here is the link https://codesandbox.io/s/focused-shamir-y85v9?file=/src/App.js:0-4390
