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 ponent="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>} ponent={Link} to={"/"}/>
<Tab label={<span className={classes.tabLabel}>About</span>} ponent={Link} to={"/about"}/>
<Tab label={<span className={classes.tabLabel}>Shows</span>} ponent={Link} to={"/programs"}/>
<Tab label={<span className={classes.tabLabel}>Events</span>} ponent={Link} to={"/events"}/>
<Tab label={<span className={classes.tabLabel}>News</span>} ponent={Link} to={"/news"}/>
<Tab label={<span className={classes.tabLabel}>Advertise</span>} ponent={Link} to={"/advertise"}/>
</Tabs>
</Container>
</AppBar>
<audio id="player">
<source
src=";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>
);
}
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 ponent="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>} ponent={Link} to={"/"}/>
<Tab label={<span className={classes.tabLabel}>About</span>} ponent={Link} to={"/about"}/>
<Tab label={<span className={classes.tabLabel}>Shows</span>} ponent={Link} to={"/programs"}/>
<Tab label={<span className={classes.tabLabel}>Events</span>} ponent={Link} to={"/events"}/>
<Tab label={<span className={classes.tabLabel}>News</span>} ponent={Link} to={"/news"}/>
<Tab label={<span className={classes.tabLabel}>Advertise</span>} ponent={Link} to={"/advertise"}/>
</Tabs>
</Container>
</AppBar>
<audio id="player">
<source
src="https://samcloud.spacial./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>
);
}
-
What is
icon? – Krishna Prashatt Commented Jul 15, 2019 at 7:42 - @KrishnaPrashatt looks like local state – James Commented Jul 15, 2019 at 7:48
1 Answer
Reset to default 3This 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.