React.js using onclick function to render a table - reactjs

Question

I have an array of objects coming from two different api. the first api I am converting it to a bullet point using
tag. and the second api should be converted to a table using tag. What I want to do is whenever I click on the bullet point it should show the table with the appropriate data. I was successfully able to get the data from both apis.
The main problem I am having is, the onClick function. First, after mapping the bullet point, the onclick function treat it as one gigantic click button. they are not seperated. Second, when I tried to hard code it , since they are only 8 bullet points. I was not able to get the data on a table.
I start coding just about a month and half ago, I have been trying everything I know for the last five days. At this point I ran out of ideas.
note that this is an example of only the fisrt table i have 8 more.
Please Help me guys thank you!
import React, { useEffect, useState } from 'react';
import './App.css';
const App = () => {
const reqMenu = "fake link";
const reqDescription = "fake link";
const [recipes, setRecipes] = useState([]);
const [description, setDescription] = useState([])
useEffect(() => {
getReq()
getDesc()
},[]);
const getReq = async () => {
const response = await fetch(reqMenu);
const data = await response.json()
setRecipes(data)
// console.log(data)
};
const getDesc = async () => {
const response= await fetch(reqDescription);
const data = await response.json()
setDescription(data)
// console.log(data)
}
const ss = description.filter((e) => (e.short_name.startsWith("SS")))
return (
<div className="App">
<h1>Menu Categories</h1>
<div>
<ul>
{recipes.map((recipe ,id, index) => (
<li key={id} onClick={() =>
{if(index[0] = recipes[0]["short_name"]){
return <table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
{ss.map((s) =>{
<tr key={id}>
<td>{s.name}</td>
<td>{s.description}</td>
</tr>
})}
</table>
}}}>
{recipe.name}-({recipe.short_name})
</li>
))}
</ul>
</div>
</div>
);
}
export default App;

Answer 1

onClick doesn't accept a return value. What you want to do is conditionally render the components based on state from the onClick.
.map also does not have an id argument.
Also, JavaScript comparison is done using == or ===. Using a single = will do assignment, not comparison.
const initialListState = recipes.map(() => false);
const [listState, setListState] = useState(initialListState);
return (
<div className="App">
<h1>Menu Categories</h1>
<div>
<ul>
{recipes.map((recipe, index) => (
<li
key={index}
onClick={() => {
const newListState = [...listState];
newListState[index] = true;
setListState(newListState);
}
>
<table>
<thead
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{listState[index] && (
ss.map((s, sindex) => (
<tr key={sindex}>
<td>{s.name}</td>
<td>{s.description}</td>
</tr>
)
}
</tbody>
</table>
{recipe.name}-({recipe.short_name})
</li>
}
</ul>
</div>
</div>
);