In React, I Call Two Lists To Page From Mongo And I Want To Click One To Filter What Is Shown In Other

This is the relevant part of my page to hopefully make it clearer I am working on a project where i have 2 mongo collections and collection A (list of symptoms) all have items from

Solution 1:

First of all, you might have a little typo in the first code block you posted. A cough (a symptom) should have an array of conditions, not an array of other symptoms, right?

Anyway, you probably want to include a state property called something like 'selectedSymptom' which gets updated each time you select a different symptom.

Then in the Conditions section, instead of rendering the full list of conditions, you can just filter for the ones that include the selectedSymptom in their array of symptoms.  

{this.state.conditions
  .filter(condition => condition.symptoms.includes(this.state.selectedSymptom))
  .map(item => (
    <ListItemkey={item.ObjectID}>
       {item.name}
    </ListItem>
  ))
}

Solution 2:

You could have another state variable, something like "selectedSymptom". Then on click of radio button, you define a method that essentially calls setState and updates the value of "selectedSymptom". In addition, change the map logic in

<ColclassName="cond"><divclassName="doubleCol">
                                    {this.state.conditions.map(item => (
                                        <ListItemkey={item.ObjectID}>
                                            {item.name}
                                        </ListItem>
                                    ))}
                                </div></Col>

to filter based off of selectedSymptom. Anytime you set the state variable, re-render will be called and it will automatically filter the list based off of selectedSymptom. Hope that helps.