setIsPlaying is not a function. Using react context-CodePudding

I am making a react music player (ok, spotify clone). I don't know about redux and any global states So Iam learning context to change states from another components. Edit: I am using a codesandbox example = https://codesandbox.io/s/react-context-forked-6t8g7l?file=/src/LanguageSwitcher.js As usual, I am getting error This is my App.js =>

    import React, { useState, useEffect  } from 'react';
import { BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import IsPlayingContext from './context/IsPlayingContext';
import styles from './style/App.module.css';
function App() {
  const [isPlaying,setIsplaying]=useState(false)
  const value = { isPlaying,setIsplaying };


  return (
    <Router >
        <div className={styles.layout}>
      <IsPlayingContext.Provider value={value} >
          {size.width > CONST.MOBILE_SIZE 
            ? <Sidebar /> 
            : <MobileNavigation />
          }
          <Switch >
            <Route exact path="/">
                <Home />
            </Route>
            <Route path="/search">
                <Search />
            </Route>
            <Route path="/library">
                <Library />
            </Route>
            <Route exact path="/playlist/:path">
                <PlaylistPage />
            </Route>
          </Switch>
          <Footer />
      </IsPlayingContext.Provider>
        </div>
      </Router>
  );
}



export default App;

Footer.js

import React, { useRef, useEffect, useState } from 'react';
import { useContext } from 'react';
import IsPlayingContext from '../../context/IsPlayingContext';
function Footer(props){
    const {isPlaying,setIsPlaying} = useContext(IsPlayingContext)



        useEffect(() => {
            setIsPlaying(true)
            // That's the line 
        }, [])
        
    
    return (
        // Here my usual code
    );
}



  
export default Footer

The error i am getting is => Uncaught TypeError: setIsPlaying is not a function at footer.js:49:1

Please help me I will be very grateful to you

CodePudding user response：

There's a typo mistake, you declared setIsplaying using a small p i in App.js

const [isPlaying,setIsplaying]=useState(false)
const value = { isPlaying,setIsplaying };

and you are accessing it as setIsPlaying where P is a capital letter in the Footer component

const {isPlaying,setIsPlaying} = useContext(IsPlayingContext)

So change it too,

const {isPlaying,setIsplaying} = useContext(IsPlayingContext)