Click here to Skip to main content
15,917,618 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
These are the errors I've been getting:
WARNING in [eslint] 
  Line 19:22:  'dispatch' is assigned a value but never used  no-unused-vars

  Line 10:10:  'state' is assigned a value but never used  no-unused-vars

This is the Header class:
import React from 'react';
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';
import HomeIcon from '@mui/icons-material/Home';
import FlagIcon from '@mui/icons-material/Flag';
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import StorefrontIcon from '@mui/icons-material/Storefront';
import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
import { Avatar, IconButton } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import ForumIcon from '@mui/icons-material/Forum';
import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useStateValue } from './StateProvider';

function Header() {

    const [{ user }, dispatch] = useStateValue();

  return (
    <div className="header">

        {/* left-side of the header */}
        <div className="header_left"> 
            {/* logo */}
            <img src="./FacebookLogo.png"  alt=" "/>

            {/* Search bar */}
            <div className="header_input">
                <input placeholder="Search Facebook"
                type="text" />


        {/* - middle of the header 
            - header-option-active: used to determine an active window 'red underline' */}
        <div className="header_middle">
            <div className="header_option header-option-active">
                <HomeIcon fontSize="large"/>

            <div className="header_option">
                <FlagIcon fontSize="large"/>

            <div className="header_option">
                <SubscriptionsIcon fontSize="large"/>

            <div className="header_option">
                <StorefrontIcon fontSize="large"/>

            <div className="header_option">
                <SupervisedUserCircleIcon fontSize="large"/>


        {/* right-side of the header */}
        <div className="header_right"> 
            <div className="header_info">
                <Avatar src={user.photoURL} />
                <h4> {user.displayName} </h4>







export default Header;

This is the LogIn class:
import { Button } from '@mui/material';
import React from 'react';
import './LogIn.css';
import { auth, provider } from './firebase';
import { useStateValue } from './StateProvider';
import { actionTypes } from './Reducer';

function LogIn() {

  const [state, dispatch] = useStateValue();

    const signIn = () => {
            .then((result) => {           
                type: actionTypes.SET_USER,
                user: result.user,
            .catch((error) => alert(error.message));

  return (
    <div className="login">

        <div className="login_logo">
            <img src="./FacebookLogo.png" alt=""/>
            <img src="./Facebook-Logo.png" alt=""/>

        <Button type="submit" onClick={signIn}>
           Sign In 

export default LogIn;

This is the Firebase class:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyA0MMeSEDIlg-En9c0cRcRSw49mMJBodPs",
    authDomain: "",
    projectId: "facebookclone-c7f1b",
    storageBucket: "",
    messagingSenderId: "328884375869",
    appId: "1:328884375869:web:c0c30d85d1bf32f089b554",
    measurementId: "G-369H5EMLW2"

  const firebaseApp = firebase.initializeApp(firebaseConfig);

  const db = firebaseApp.firestore();

  const auth = firebase.auth();

  const provider = new firebase.auth.GoogleAuthProvider();

  export { auth, provider };

  export default db;

What I have tried:

I suspect the errors come from the:
const [{ user }, dispatch] = useStateValue();
Updated 7-Dec-22 23:15pm
Graeme_Grant 8-Dec-22 5:12am    
Don't post your API keys in a public forum. You need to urgently regenerate your API keys!
007 007 24-Dec-22 8:39am    
on it

1 solution

Warnings are not errors, they are there to assist you. If you don't require those variables, then you can usually tell the linter to ignore them.

Here is how from the eslint documentation: Ignoring Code - ESLint - Pluggable JavaScript Linter[^]

But first, you should check your code using debugging.

If you are not familiar with debugging, here is a quick tutorial: A complete guide to getting started with React debugging · Raygun Blog[^]
Share this answer
007 007 19-Dec-22 11:45am    
got it

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900