React-Rendering a 2 dimensional array - reactjs

Question

When I try to select a specific button rendered from a 2d array, it ends up selecting all rendered buttons. Is there a way to render the lower details for one specific button.
<Grid container>
{this.serviceByLangauge.map((cat, id) => (
<Grid
item
xs={4}
key={cat.id}
className={this.props.classes.categoryGroup}
>
<Button
variant="contained"
size="medium"
color="primary"
className={this.props.classes.services}
onClick={this.showServices.bind(this, cat.services)}
key={cat.id}
>
{cat.name}
</Button>
<div className={this.props.classes.serviceGroup}>
{servicesList.length > 0 ? (
<List>
{servicesList.map((serv, id) => (
<ListItem key={id}>
<ListItemText primary={id + 1 + ") " + serv.name} />
</ListItem>
))}
</List>
) : (
<div></div>
)}
</div>
</Grid>
))}
</Grid>
]2

Answer 1

can you show us the data of the 2d array?
edit:
I guess you're not iterating servicesList.
Try this instead:
<Grid container>
{this.serviceByLangauge.map((cat, id) => (
<Grid
item
xs={4}
key={cat.id}
className={this.props.classes.categoryGroup}
>
<Button
variant="contained"
size="medium"
color="primary"
className={this.props.classes.services}
onClick={this.showServices.bind(this, cat.services)}
key={cat.id}
>
{cat.name}
</Button>
<div className={this.props.classes.serviceGroup}>
{cat.services.length > 0 ? (
<List>
{cat.services.map((serv, id) => (
<ListItem key={id}>
<ListItemText primary={id + 1 + ") " + serv.name} />
</ListItem>
))}
</List>
) : (
<div></div>
)}
</div>
</Grid>
))}
</Grid>

Answer 2

From the images and the source code you provided, I think to following is wrong:
You derive the services to show from your state. In your state, you have only one list of services. When clicking a button, you update the state with the services of the button.
<Button
variant="contained"
size="medium"
color="primary"
className={this.props.classes.services}
onClick={this.showServices.bind(this, cat.services)}
key={cat.id}
>
Then you iterate on this same state for every button:
<div className={this.props.classes.serviceGroup}>
{servicesList.length > 0 ? (
<List>
{servicesList.map((serv, id) => (
<ListItem key={id}>
<ListItemText primary={id + 1 + ") " + serv.name} />
</ListItem>
))}
</List>
) : (
<div></div>
)}
</div>
I think you want to iterate over cat instead of serviceList:
<div className={this.props.classes.serviceGroup}>
{cat.length > 0 ? (
<List>
{cat.map((serv, id) => (
<ListItem key={id}>
<ListItemText primary={id + 1 + ") " + serv.name} />
</ListItem>
))}
</List>
) : (
<div></div>
)}
</div>

Answer 3

I had to add a condition to make sure that I'm only rendering the div when category id's match
if (this.state.showThis) {
servicesComponent = (
<List className={this.props.classes.serviceGroup}>
{this.state.services.map((serv, id) => (
<ListItem key={id}>
<ListItemText primary={id + 1 + ") " + serv[langCode]} />
</ListItem>
))}
</List>
);
} else {
servicesComponent = <div></div>;
}
const categories = servicesAndCategories.map((category, index) => (
<Grid
item
xs={4}
className={this.props.classes.categoryGroup}
key={index}
>
<Button
variant="contained"
size="medium"
color="primary"
className={this.props.classes.services}
onClick={this.showServices.bind(this, category.services, category.id)}
>
{category[langCode]}
</Button>
{this.state.currentCategory === category.id && servicesComponent}
</Grid>
));
``