ReactJS-嵌套块是冗余的非独行块吗？

Question

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

 { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }

When I run the code I get

Line 69:  Nested block is redundant  no-lone-blocks

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?

My full navbar 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 (
    <Typography component="div" style={{ padding: 8 * 3 }}>
      {props.children}
    </Typography>
  );
}

TabContainer.propTypes = {
  children: PropTypes.node.isRequired,
};

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
      },
      menuButton: {
        marginRight: theme.spacing(2),
      },
      fab: {
        position: 'absolute',
        background:'red',
        bottom: theme.spacing(2),
        right: theme.spacing(2),
        "&:hover, &: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 => { 
    setIcon(!icon)
    { icon ? document.getElementById("player").play() : document.getElementById("player").pause() }
  }


  React.useState(() => {
    if(!firstTime)
    {
        setTimeout(function(){  document.getElementById("player").play(); }, 3000);
    }
      if(!firstTime && window.location.pathname === "/about"){
        firstTime = 1;
      }
      if(!firstTime && window.location.pathname === "/"){
        firstTime = 0;
      }
      if(!firstTime && window.location.pathname === "/programs"){
        firstTime = 2;
      }
    }
  );

  const [value, setValue] = React.useState(firstTime);

  function handleChange(event, newValue) {
    setValue(newValue);
  }

  return (
    <div className={classes.root}>


     <AppBar position="static" color="default" className={classes.tab}>
        <Container maxWidth="lg">
        <Tabs value={value} onChange={handleChange}
        className={classes.tab}
        variant="scrollable"
        scrollButtons="auto"
        centered
        >
          <Tab label={<span className={classes.tabLabel}>Home</span>} component={Link} to={"/"}/>
          <Tab label={<span className={classes.tabLabel}>About</span>} component={Link} to={"/about"}/>
          <Tab label={<span className={classes.tabLabel}>Shows</span>} component={Link} to={"/programs"}/>
          <Tab label={<span className={classes.tabLabel}>Events</span>} component={Link} to={"/events"}/>
          <Tab label={<span className={classes.tabLabel}>News</span>} component={Link} to={"/news"}/>
          <Tab label={<span className={classes.tabLabel}>Advertise</span>} component={Link} to={"/advertise"}/>
        </Tabs>
        </Container>
      </AppBar>
      <audio id="player">
                <source
                    src="https://samcloud.spacial.com/api/listen?sid=106487&m=sc&rid=184639"
                    type="audio/mpeg"
                />
            </audio>
      <Fab aria-label='test' className={classes.fab}>
            <i className='large material-icons' style={fabIcon} onClick={handleClick}>
            { icon ? 'play_circle_outline' : 'pause_circle_outline'}</i>
          </Fab>
    </div>
  );

}

Answer 1

This isn't really an error per se , it's an ESLint rule - and it's simply making you aware that you are creating an unnecessary scope via { ... } .

I am inclined to agree with the linter, remove the brackets because they aren't necessary.