Почему при 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 был передан из контекста и он отображается.
в чем мой косяк((