title: How to conditionally render data based on selected value in react-select
body: <p>Hey I am new to react and self-taught. Can someone please point me in the right direction or give me some clue. I have a react select component displayed on the top of my page. The data in this component is populated from my useContext provider. The desired outcome I want is, when the user selects a certain component, I want to populate the page with relevant cards that have corresponding data. All the data is available in my authContext.</p>
  <p>I have come this far, but nothing populates when the user selects the value from the drop down. Can someone please help:-</p>
  <pre><code>import React, { useContext, useEffect, useState } from 'react'
  import styles from './FullRecord.module.css'
  import {AuthContext} from '../../shared/context/auth-context'
  import Select from 'react-select'
  import { makeStyles } from '@material-ui/core/styles';
  import Card from '@material-ui/core/Card';
  import CardContent from '@material-ui/core/CardContent';
  import Typography from '@material-ui/core/Typography';
  
  
  const useStyles = makeStyles({
      custom: {
        backgroundColor: &quot;#558d6b&quot;,
        fontWeight: &quot;bold&quot;
      },
      customFont: {
        fontWeight: &quot;bold&quot;,
        fontSize: &quot;20px&quot;
      },
      customFont1: {
        fontWeight: &quot;light&quot;
      }
    });
  
    
  
  const FullRecord = (props) =&gt; {
  
      let data
  
      const auth = useContext(AuthContext)
  
      const [edition1, setEdition1] = useState(false)
  
      const options = auth.tournaments.map((tournament) =&gt; {
          return {
              value: tournament.TournamentName,
              label: tournament.TournamentName,
          }
          })
  
      console.log(options)
  
      const classes = useStyles();
          
      const handleChange = (selectedValue1) =&gt; {
          console.log(selectedValue1)
          setEdition1(true)
          const {value}  = selectedValue1
          console.log(value)
          console.log(edition1)
          if(value === 'GSM Edition 1'){
              const noOfMatches = auth.profile.MemberMatches.filter((match) =&gt; match.TournamentName === 'GSM Edition 1')
              console.log(noOfMatches)
                  data = 
                      &lt;div&gt;
                   &lt;li className={styles['member-item']}&gt;
                       &lt;Card className={classes.custom} variant=&quot;outlined&quot;&gt;
                            &lt;CardContent&gt;
                                 &lt;Typography className={classes.customFont}  gutterBottom&gt;
                                       Number Of Matches Played
                                  &lt;/Typography&gt;
                                  &lt;Typography className={classes.customFont}&gt;
                                       {noOfMatches}
                                  &lt;/Typography&gt;
                             &lt;/CardContent&gt;
                        &lt;/Card&gt;
                   &lt;/li&gt;               
              &lt;/div&gt;
              }    
          }
  
        
  
  
      return (
          &lt;React.Fragment&gt;
              &lt;div className={styles['fullrecord__maindiv']}&gt;
                  &lt;Select 
                  //  value={options.value}
                   onChange={handleChange}
                   options={options}
                  /&gt;
              &lt;/div&gt;
              {edition1 &amp;&amp; &lt;div&gt;
                  {data}
              &lt;/div&gt;}
          &lt;/React.Fragment&gt;
      )
  }
  
  export default FullRecord
  </code></pre>
  <p><a href="https://i.stack.imgur.com/HnQRM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HnQRM.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/SVl2j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SVl2j.png" alt="enter image description here" /></a></p>