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

Tags: , , , ,

This is all in Prescriptions.js

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

const [drugs, setDrugs] = React.useState([]);
useEffect(() => {
        .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.

    <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>

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


return => (
    { => drug.category === ? 
      <MenuItem value={drug.value}>{}</MenuItem>
      : null

Source: stackoverflow