Почему при useContext передается функция обновляющее состояние(useState) как undefined

Создаю отдельный компонент для контекста с хуком useState в котором [lan, setLan], так как мне надо поменять с 'Ru' на 'En', чтобы в дальнейшем перевести страницу на английский

import { createContext } from 'react';
import { useState } from 'react'

export  const TranslateContext = createContext({
    lan: 'Ru'
})

export const TranlateContextProvider = ({children}) =>{
     const [lan, setLan] = useState('Ru') 
     
    return <TranslateContext.Provider value={{lan, setLan}}>
        {children}
    </TranslateContext.Provider>
}

Потом импортирую его в главный App пишу const {lan, setLan} = useContext(TranslateContext)

import './index.css';
import {useContext, useState} from 'react'
import { TranlateContextProvider, TranslateContext } from './translate.context';
import { dataLan } from './data';

function App() {

  const [count, setCount] = useState(0)
  const {lan, setLan} = useContext(TranslateContext)

  console.log(setLan) //undefined

  function clickMinusPlus(sym){
    sym == '+' ? setCount(count + 1) : setCount(count - 1)
  }
  
  function changeTranslate(lan){
    console.log(lan)
    if (lan == 'Ru') setLan('En')
    if (lan == 'En') setLan('Ru')
  }

  return (
    <TranlateContextProvider>
      <h1 className='translate' onClick = {()=>changeTranslate(lan)}>{lan}</h1>
      <div className="App">
        <div>
          <h2>{}:</h2>
          <h1>{count}</h1>
          <button className="minus" onClick={()=>clickMinusPlus("-")}>- {}</button>
          <button className="plus" onClick={()=> clickMinusPlus("+")}>{} +</button>
        </div>
      </div>
    </TranlateContextProvider>
  );
}

export default App;

В <TranslateContext.Provider value={{lan, setLan}}> все вроде бы написано правильно, value через {{item}}

Но почему-то когда я нажимаю на кнопку, чтобы сменить Ru на En через переданную функцию изменения состояния setLan, то сообщается ошибка, что setLan - undefined, хотя сам lan был передан из контекста и он отображается.

в чем мой косяк((


Ответы (0 шт):