title: How do I convert a dropdown which switch between all and fav reports into single button in react js?
body: <p><strong>I had a drop-down for switching reports type all to fav. Now I want to change it into a single button, a Single button which initially shows All reports then clicks onto it changes to Fav reports and then re-click to initial state</strong></p>
  <p><a href="https://i.stack.imgur.com/fHHw5.png" rel="nofollow noreferrer">image of drop down i created</a></p>
  <p>code for component dropdown yourReportDropDown.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import {
      Grid,
      Typography,
      Paper,
      makeStyles,
      createStyles,
  } from &quot;@material-ui/core&quot;;
  import ExpandMoreIcon from &quot;@material-ui/icons/ExpandMore&quot;;
  import ClickAwayListener from &quot;@material-ui/core/ClickAwayListener&quot;;
  import Popover from &quot;@material-ui/core/Popover&quot;;
  import Radio from &quot;@material-ui/core/Radio&quot;;
  import ReportIcon from '../../../../images/allReport.png';
  import FavoriteIcon from '../../../../images/favorite.png';
  
  const useStyles = makeStyles((theme) =&gt;
      createStyles({
          rowAlign: {
              display: &quot;flex&quot;,
              flexDirection: &quot;row&quot;,
          },
          fontStyle: {
              fontFamily: &quot;Montserrat&quot;,
          },
          scrollBar: {
              &quot;&amp;::-webkit-scrollbar&quot;: {
                  width: 5,
                  borderRadius: 17,
              },
              &quot;&amp;::-webkit-scrollbar-thumb&quot;: {
                  background: &quot;#ffB800&quot;,
                  borderRadius: 17,
              },
          },
          onHover:{
              &quot;&amp;:hover&quot;: {
                  backgroundColor: '#fff7e1'
              },
          }
      })
  );
  
  const YourReportDropDown = (props) =&gt; {
      const classes = useStyles();
  
      const [anchorEl, setAnchorEl] = React.useState(null);
  
      const handleClick = (event) =&gt; {
          setAnchorEl(event.currentTarget);
          setRotateVal(180);
      };
  
      const handleClose = () =&gt; {
          setAnchorEl(null);
          setRotateVal(0);
      };
  
      const open = Boolean(anchorEl);
  
      const [rotateVal, setRotateVal] = useState(0);
  
      const handleSelected = (e, filterType, element) =&gt; {
          props.handleChange(e, filterType, element);
          handleClose();
      };
  
      useEffect(() =&gt; {}, [props.dropDownList]);
  
      //   console.log(&quot;countries&quot;, props.dropDownList);
      return (
          &lt;ClickAwayListener onClickAway={handleClose}&gt;
              &lt;div
                  style={{
                      width: &quot;100%&quot;,
                      width: 211,
                      marginLeft: props.filterType === &quot;category&quot; ? 45 : 0,
                  }}
              &gt;
                  &lt;div
                      className={classes.rowAlign}
                      style={{
                          padding: &quot;10px&quot;,
                          justifyContent: &quot;space-between&quot;,
                          backgroundColor: &quot;#e3e9ff&quot;,
                          alignItems: &quot;center&quot;,
                          borderRadius: 4,
                          cursor: &quot;pointer&quot;,
                      }}
                      onClick={(event) =&gt; handleClick(event)}
                  &gt;
                      &lt;div className={classes.rowAlign} style={{ alignItems: &quot;center&quot; }}&gt;
                          &lt;img
                              src={props.selectedFields === 'All' ? ReportIcon : FavoriteIcon}
                              style={{ width: 20, height: 20 }}
                          /&gt;
                          &lt;Typography
                              className={classes.fontStyle}
                              style={{
                                  fontSize: 18,
                                  marginLeft: 13,
                                  width: 123,
                                  textAlign: &quot;left&quot;,
                              }}
                              noWrap
                          &gt;
  
                              {props.selectedFields}
                          &lt;/Typography&gt;
                      &lt;/div&gt;
                      &lt;ExpandMoreIcon style={{ transform: `rotate(${rotateVal}deg)` }} /&gt;
                  &lt;/div&gt;
  
                  &lt;Popover
                      open={open}
                      onClose={handleClose}
                      anchorEl={anchorEl}
                      anchorOrigin={{
                          vertical: &quot;bottom&quot;,
                          horizontal: &quot;center&quot;,
                      }}
                      transformOrigin={{
                          vertical: &quot;top&quot;,
                          horizontal: &quot;center&quot;,
                      }}
                      style={{
                          marginTop: 10,
                          width: &quot;100%&quot;,
                      }}
                  &gt;
                      {props.dropDownList.map((element, index) =&gt; {
                          return (
                              &lt;div
                                  className={classes.onHover}
                                  key={element}
                                  value={element}
                                  style={{
                                      width: &quot;100%&quot;,
                                      justifyContent: &quot;space-between&quot;,
                                      margin: &quot;5px 5px&quot;,
                                      width: 201,
                                      display: &quot;flex&quot;,
                                      flexDirection: &quot;row&quot;,
                                      alignItems: &quot;center&quot;,
                                      cursor:'pointer'
                                  }}
                                  onClick={(event) =&gt;
                                      handleSelected(event, props.filterType, element)
                                  }
                              &gt;
                                  &lt;Typography className={classes.fontStyle}&gt;
                                      {element}
                                  &lt;/Typography&gt;
  
                              &lt;/div&gt;
                          );
                      })}
  
                  &lt;/Popover&gt;
  
              &lt;/div&gt;
          &lt;/ClickAwayListener&gt;
      );
  };
  
  export default YourReportDropDown;
  </code></pre>
  <p>Section Container where i am using this drop-down code SectionContainer.js</p>
  <pre><code>import React, {useState} from &quot;react&quot;;
  import {
    createStyles,
    makeStyles,
    Typography,
    Grid,
    Paper,
    Tooltip,
    withStyles,
    Zoom,
    InputAdornment,
  } from &quot;@material-ui/core&quot;;
  import ReportCard from &quot;../reportCard&quot;;
  import YourReportDropDown from &quot;./component/yourReportDropDown&quot;;
  import YourFav from &quot;./component/fav&quot;;
  
  const useStyles = makeStyles((theme) =&gt;
    createStyles({
      tooltip: {
        backgroundColor: theme.palette.common.white,
        boxShadow: theme.shadows[4],
        fontSize: 14,
        fontFamilt: &quot;Lato&quot;,
        fontWeight: &quot;bold&quot;,
        padding: 10,
        color: &quot;#141414&quot;,
      },
      rowAlignMent: {
        display: &quot;flex&quot;,
        flexDirection: &quot;row&quot;,
        justifyContent: &quot;space-between&quot;,
      },
      linkHover: {
        textDecoration: &quot;none&quot;,
        color: &quot;#141414&quot;,
        &quot;&amp;:hover&quot;: {
          color: &quot;#141414&quot;,
          textDecoration: &quot;underline&quot;,
        },
      },
      formControl: {
        // minWidth: 180,
        // borderRadius: 8,
        // margin: theme.spacing(1),
        display: &quot;flex&quot;,
        // alignItems:'center',
        padding: &quot;0px 5px&quot;,
        justifyContent: &quot;center&quot;,
        width: 260,
        height: 38,
        backgroundColor: &quot;#f5f5f5&quot;,
        borderRadius: 5,
        fontFamily: &quot;Montserrat&quot;,
        &quot;&amp;:hover&quot;: {
          borderWidth: 0,
          border: &quot;none&quot;,
        },
      },
      selectEmpty: {
        marginTop: theme.spacing(2),
      },
      selectInput: {
        padding: &quot;5px 10px&quot;,
        fontFamily: &quot;Montserrat&quot;,
        fontSize: 18,
        fontWeight: &quot;600&quot;,
        // backgroundColor:&quot;#f5f5f5&quot;
      },
      selectStyle: {
        fontFamily: &quot;Montserrat&quot;,
        &quot;&amp; .MuiOutlinedInput-notchedOutline&quot;: {
          border: &quot;none&quot;,
        },
        &quot;&amp;.Mui-focused .MuiOutlinedInput-notchedOutline&quot;: {
          border: &quot;none&quot;,
          borderRadius: 4,
        },
        &quot;&amp;:hover .MuiOutlinedInput-notchedOutline&quot;: {
          border: &quot;none&quot;,
          borderRadius: 4,
        },
      },
      scrollBar: {
        &quot;&amp;::-webkit-scrollbar&quot;: {
          width: 4,
          borderRadius: 38,
          background: &quot;#F0F0F0&quot;,
        },
        &quot;&amp;::-webkit-scrollbar-thumb&quot;: {
          background: &quot;#ffb800&quot;,
          borderRadius: 38,
        },
      },
    })
  );
  
  const SectionContainer = (props) =&gt; {
    const classes = useStyles();
  
    const { reports,sectionText, filter, handleChange } = props;
  
    const [filterValues, setFilterValues] = useState(['All', 'Favorites'])
  
    return (
      &lt;Grid item xs={6}&gt;
        &lt;Paper
          elevation={0}
          style={{
            display: &quot;flex&quot;,
            flexDirection: &quot;column&quot;,
            padding: &quot;16px 24px&quot;,
            // height: &quot;auto&quot;,
            height:427,
            backgroundColor: &quot;#FFFFFF&quot;,
            borderRadius: 10,
            width:window.innerWidth &lt; 760? &quot;90vw&quot; : null
          }}
        &gt;
          &lt;div className={classes.rowAlignMent} style={{ alignItems: &quot;center&quot; }}&gt;
            &lt;Typography
              style={{
                fontFamily: &quot;Montserrat&quot;,
                fontWeight: &quot;500&quot;,
                fontSize: 30,
                color: &quot;#181818&quot;,
                marginBottom: 5,
                textAlign: &quot;left&quot;,
              }}
            &gt;
              {sectionText}
            &lt;/Typography&gt;
            {sectionText === &quot;Your Reports&quot; &amp;&amp; (
              &lt;YourReportDropDown
              initialValue={&quot;Type&quot;}
              selectedFields={filter}
              dropDownList={filterValues}
              handleChange={handleChange}
              filterType={&quot;persona&quot;}
              // imgPath={PersonaIcon}
            /&gt;
  
            
            )}
          &lt;/div&gt;
  
          &lt;div
            style={{
              display: &quot;flex&quot;,
              marginTop: 5,
              height: '100%',
              overflowY: &quot;auto&quot;,
              padding: 10,
              alignItems:
                sectionText === &quot;Other Reports Relevant To You&quot;
                  ? &quot;center&quot;
                  : &quot;flex-start&quot;,
            }}
            className={classes.scrollBar}
          &gt;
            &lt;Grid container spacing={1}&gt;
              {
                reports.length?reports.map((element, index) =&gt; {
                  // if (index &lt;= 2) {
                  return (
                  &lt;ReportCard
                      key={index}
                      element={element}
                      index={index}
                      sectionText={sectionText}
                    /&gt;
                  );
                  // }
                })
                :
                &lt;div
                  style={{
                    height: &quot;100%&quot;,
                    width: &quot;100%&quot;,
                    justifyContent: &quot;center&quot;,
                    alignItems: &quot;center&quot;,
                    marginTop:130
                  }}
                &gt;
                  &lt;Typography
                    style={{ fontFamily: &quot;Montserrat&quot;, textAlign: &quot;center&quot; }}
                  &gt;
                    No Reports to show
                  &lt;/Typography&gt;
                &lt;/div&gt;
              }
            &lt;/Grid&gt;
          &lt;/div&gt;
        &lt;/Paper&gt;
      &lt;/Grid&gt;
    );
  };
  
  export default SectionContainer;
  
  </code></pre>