I am fairly new to Context API. Basically, I want to when I press on the Button in the ButtonComponent that button disappears as well as everything in the ImageComponent but I am getting this error (TypeError: render is not a function updateContextConsumer). Quick note The button is rendered in the Sidebar Component. I am kind of stuck on this error/bug and I would be very grateful if I got someone's help if possible.
HiddenContext
import React, { useState } from 'react';
export const HiddenContext =React.createContext(false)
function HiddenProvider ({children}) {
const[hideButton, setHideButton]= React.useState(false)
function handleClick (){
setHideButton(true)
}
return(
<HiddenContext.Provider value ={{hideButton,handleClick}}>
{children}
</HiddenContext.Provider>
);
}
import React, { useState } from 'react';
import './App.css';
import Sidebar from './Sidebar';
import ImageComponent from './ImageComponent';
import { HiddenContext, } from './HiddenContext';
function App() {
const{ hideButton}=React.useContext(HiddenContext)
return (
<div className="App">
<Sidebar />
<HiddenContext>
<ImageComponent hideButton={hideButton} />
</HiddenContext>
</div>
);
}
export default App;
ImageComponent
import React, {useState, ReactFragment} from 'react'
import {
BrowserRouter as Router,
Link
} from "react-router-dom";
import { HiddenContext, } from './HiddenContext';
const ImageComponent=()=>{
const { hideButton } = React.useContext(HiddenContext);
return (
<div>
{!hideButton && (
<React.Fragment>
<Router>
<Link className="google"
onClick={() => {
window.location.href = 'https://google.com/';
}}>
<img src="./icons/icons8-google-48.png" alt="Google"/>
<figcaption>Image</figcaption>
</Link>
</Router>
</React.Fragment>)}
</div>
)
}
ButtonComponent
import React, {useState, ReactFragment} from 'react'
const ButtonComponent =()=>
const { hideButton, handleClick } = React.useContext(HiddenContext);
return(
<div>
<React.Fragment>
{!hideButton &&(
<li>
<img className="image"src="./icons/icons8-button-48.png"/>
<Button onClick={handleClick} variant="outlined" className="button__rightpage" >Button</Button>
<caption className="text"> Button</caption>
</li>)}
</React.Fragment>
</div>
)
}
The problem is you are wrapping the ImageComponent
with HiddenContext
instead you should wrap it with HiddenProvider
. That will solve your problem. Before importing HiddenProvider you need to export it.
import React, { useState } from 'react';
export const HiddenContext =React.createContext(false)
export const HiddenProvider = ({children}) => {
const[hideButton, setHideButton]= React.useState(false)
function handleClick (){
setHideButton(true)
}
return(
<HiddenContext.Provider value ={{hideButton,handleClick}}>
{children}
</HiddenContext.Provider>
);
}
import React, { useState } from 'react';
import './App.css';
import Sidebar from './Sidebar';
import ImageComponent from './ImageComponent';
import { HiddenProvider } from './HiddenContext';
function App() {
const{ hideButton}=React.useContext(HiddenContext)
return (
<div className="App">
<Sidebar />
<HiddenProvider>
<ImageComponent hideButton={hideButton} />
</HiddenProvider>
</div>
);
}
export default App;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.