title: ReactJS - Nested block is redundant no-lone-blocks?
body: <p>So I am getting an error which does not make sense to me, maybe because first ReactJS app that I have made, but the following is on Line 69 in my navbar.js file</p>
  
  <pre><code> { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }
  </code></pre>
  
  <p>When I run the code I get </p>
  
  <pre><code>Line 69:  Nested block is redundant  no-lone-blocks
  </code></pre>
  
  <p>I don't understand how I am meant to code the above to the new standard, could someone please advise and explain how the new logic is different to the old?</p>
  
  <p>My full navbar code</p>
  
  <pre><code>    import React from 'react';
  import { Link } from "react-router-dom";
  import PropTypes from 'prop-types';
  import Container from '@material-ui/core/Container';
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Fab from '@material-ui/core/Fab';
  import Tabs from '@material-ui/core/Tabs';
  import Tab from '@material-ui/core/Tab';
  import Typography from '@material-ui/core/Typography';
  
  function TabContainer(props) {
    return (
      &lt;Typography component="div" style={{ padding: 8 * 3 }}&gt;
        {props.children}
      &lt;/Typography&gt;
    );
  }
  
  TabContainer.propTypes = {
    children: PropTypes.node.isRequired,
  };
  
  const useStyles = makeStyles(theme =&gt; ({
      root: {
          flexGrow: 1,
        },
        menuButton: {
          marginRight: theme.spacing(2),
        },
        fab: {
          position: 'absolute',
          background:'red',
          bottom: theme.spacing(2),
          right: theme.spacing(2),
          "&amp;:hover, &amp;:focus":{
            background:'black',
          }
        },
        tab:
        { 
         backgroundColor: "#b71c1c",
         color: "#fff",
         fontSize:'4em',
         fontWeight:"bold",
         selectedTextColor: "#ffffff",
        },
        tabLabel:
        {
            fontSize:'18px',
        },
        title: {
          flexGrow: 1,
          align:'center',
        },
  }));
  
  export default function SimpleTabs() {
    var firstTime = false;
    const classes = useStyles();
    const [icon,setIcon] = React.useState(false)
  
    const fabIcon = {
      color: 'white',
      fontSize: 40,
    };
    const handleClick = e =&gt; { 
      setIcon(!icon)
      { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }
    }
  
  
    React.useState(() =&gt; {
      if(!firstTime)
      {
          setTimeout(function(){  document.getElementById("player").play(); }, 3000);
      }
        if(!firstTime &amp;&amp; window.location.pathname === "/about"){
          firstTime = 1;
        }
        if(!firstTime &amp;&amp; window.location.pathname === "/"){
          firstTime = 0;
        }
        if(!firstTime &amp;&amp; window.location.pathname === "/programs"){
          firstTime = 2;
        }
      }
    );
  
    const [value, setValue] = React.useState(firstTime);
  
    function handleChange(event, newValue) {
      setValue(newValue);
    }
  
    return (
      &lt;div className={classes.root}&gt;
  
  
       &lt;AppBar position="static" color="default" className={classes.tab}&gt;
          &lt;Container maxWidth="lg"&gt;
          &lt;Tabs value={value} onChange={handleChange}
          className={classes.tab}
          variant="scrollable"
          scrollButtons="auto"
          centered
          &gt;
            &lt;Tab label={&lt;span className={classes.tabLabel}&gt;Home&lt;/span&gt;} component={Link} to={"/"}/&gt;
            &lt;Tab label={&lt;span className={classes.tabLabel}&gt;About&lt;/span&gt;} component={Link} to={"/about"}/&gt;
            &lt;Tab label={&lt;span className={classes.tabLabel}&gt;Shows&lt;/span&gt;} component={Link} to={"/programs"}/&gt;
            &lt;Tab label={&lt;span className={classes.tabLabel}&gt;Events&lt;/span&gt;} component={Link} to={"/events"}/&gt;
            &lt;Tab label={&lt;span className={classes.tabLabel}&gt;News&lt;/span&gt;} component={Link} to={"/news"}/&gt;
            &lt;Tab label={&lt;span className={classes.tabLabel}&gt;Advertise&lt;/span&gt;} component={Link} to={"/advertise"}/&gt;
          &lt;/Tabs&gt;
          &lt;/Container&gt;
        &lt;/AppBar&gt;
        &lt;audio id="player"&gt;
                  &lt;source
                      src="https://samcloud.spacial.com/api/listen?sid=106487&amp;m=sc&amp;rid=184639"
                      type="audio/mpeg"
                  /&gt;
              &lt;/audio&gt;
        &lt;Fab aria-label='test' className={classes.fab}&gt;
              &lt;i className='large material-icons' style={fabIcon} onClick={handleClick}&gt;
              { icon ? 'play_circle_outline' : 'pause_circle_outline'}&lt;/i&gt;
            &lt;/Fab&gt;
      &lt;/div&gt;
    );
  
  }
  </code></pre>