No unused Variables

Viewed 3437

In my useState hook, I am importing context; thus, setUser is going unused and giving me and Eslinting warning. I am unsure of how to stifle this warning and have run out of ideas in order to do so. If anyone has a suggestion or best practices in React for stifling this warning I would greatly appreciate it. the code is as follows:

import React, { useContext } from 'react'
import { Link } from 'react-router-dom'
// Material UI
import Button from '@material-ui/core/Button'
import Grid from '@material-ui/core/Grid'
import Container from '@material-ui/core/Container'
import User from './User'
// context
import { ProfileContext } from '../contexts/ProfileContext'
const Header = ({ isAuth, logout }) => {
  const [user, setUser] = useContext(ProfileContext)
  return (
    <Container maxWidth="lg" style={{ padding: 10 }}>
      <Grid container justify="space-between">
        <Grid item xs={2}>
          <Button color="inherit" component={Link} to="/">
            Jobtracker
          </Button>
        </Grid>
        <Grid item xs={10} container justify="flex-end">
          <div>
            {isAuth ? (
              <>
                {user && user.user.admin && (
                  <Button color="inherit" component={Link} to="/admin">
                    Admin
                  </Button>
                )}
                <Button color="inherit" component={Link} to="/profile">
                  Profile
                </Button>
                <Button color="inherit" component={Link} to="/dashboard">
                  Dashboard
                </Button>
                <Button color="inherit" onClick={logout}>
                  Logout
                </Button>
              </>
            ) : (
              <>
                <Button color="inherit" component={Link} to="/login">
                  Login
                </Button>
                <Button color="inherit" component={Link} to="/signup">
                  SignUp
                </Button>
              </>
            )}
          </div>
        </Grid>
      </Grid>
    </Container>
  )
}
export default Header
2 Answers

You don't have to destructure it when you don't need it:

const [user] = useContext(ProfileContext)

In addition, if you just need to setUser, you can skip items while destructuring by using a comma without an variable or constant name:

const [, setUser] = useContext(ProfileContext)

If you are not using setUser just remove it from destructuring

Related