How can I conditionally map multiple arrays with if statements after fetching an array of objects? (React)

This is all in Prescriptions.js

I am fetching a bunch of prescription drugs from my api.

const [drugs, setDrugs] = React.useState([]);
    
useEffect(() => {
    fetch('/api/drugs')
        .then(response => response.json())
        .then(json => setDrugs(json))
}, [drugs])

After that’s done, I want to make a category array based on drug.class and render it down there. If that category already exists, then push the drug into it’s category’s array, if it doesn’t, make a new array based on that category, push the drug into that array, and render it as shown.

</Select>
    <ListSubheader>Category 1</ListSubheader>
    <MenuItem value="valuehere">Option 1</MenuItem>
    <MenuItem value="valuehere">Option 2</MenuItem>
    <ListSubheader>Category 2</ListSubheader>
    <MenuItem value="valuehere">Option 3</MenuItem>
    <MenuItem value="valuehere">Option 4</MenuItem>
</Select>

I’ve been trying to get this done for days and I am stuck, would appreciate some help!

Answer

return categories.map(category => (
  <> 
    <ListSubheader>{category.name}</ListSubheader>
    {drugs.map(drug => drug.category === category.name ? 
      <MenuItem value={drug.value}>{drug.name}</MenuItem>
      : null
    )}
  </>
))