A continuación se muestra mi componente de encabezado en reaccionar:

 import React from 'react' import {AppBar} from '@material-ui/core' import {Typography,Container,Toolbar,Select,MenuItem} from '@material-ui/core' import {useNavigate} from 'react-router-dom' import { CryptoState } from './CryptoContext' const Header = () => { const navigate=useNavigate(); const {currency,setCurrency}=CryptoState(); return ( <AppBar> <Container> <Toolbar> <Typography onClick={()=>navigate('/')}> CryptoTracker </Typography> <Select value={currency} onClick={(e)=>setCurrency(e.target.value)} > <MenuItem value="USD">USD</MenuItem> <MenuItem value="INR">INR</MenuItem> </Select> </Toolbar> </Container> </AppBar> ) } export default Header

He usado ContextAPI para una gestión de estado eficiente. CryptoState se usa para este propósito. He importado el estado en Header y obtuve los accesorios necesarios usando la desestructuración de objetos.

A continuación se muestra mi archivo de contexto:

 import React from 'react' import { useEffect } from 'react'; import { createContext ,useState,useContext } from 'react'; const CryptoContext = ({children}) => { const Crypto=createContext(); const [currency,setCurrency]=useState("USD"); const [symbol,setSymbol]=useState("$"); useEffect(()=>{ if(currency=="INR") setSymbol("₹") else setSymbol("$") }) return ( <Crypto.Provider value={{currency,symbol,setCurrency}}> {children} </Crypto.Provider> ) } export default CryptoContext; export const CryptoState=()=>{ return useContext(Crypto); }

Recibo este error en el componente de encabezado: Header.js:8 Uncaught TypeError: Cannot destructure property 'currency' of '(0 , _CryptoContext__WEBPACK_IMPORTED_MODULE_1__.CryptoState)(...)' as it is undefined.