In my project, I actually use the context api. Additionally, I pass the name of an image from my component to the context provider on onclick, and then I take the name from the provider and pass it to another component. It is operating flawlessly. But there was a console error. When I send data to the context and access it inĀ another component, the log always displays the same same props error.
TemplateLib:
<ImagesGrid
images={images}
getPreview={(image) => window.location.origin + '/' + image.image}
onSelect={async (image) => {
//here i'm passing the name to the provider function
await fetchEditData(image.name)
// localStorage.setItem('template_name', image.name)
const altered = JSON.parse(image.template_json)
store.loadJSON(altered);
}}
/>
Provider:
const App = ({ store }) => {
const [data, setData] = useState('')
const fetchEditData = async (name) => {
setData(await name)
}
return (
<PolotnoContext.Provider value={{ fetchEditData, data }} >
<div
style={{
width: '100%',
height: height + 'px',
display: 'flex',
flexDirection: 'column',
}}
>
// body
</div>
</PolotnoContext.Provider>
);
};
topBar.jsx:
// Here I'm getting the name
export default observer(({ store }) => {
const { data } = useContext(PolotnoContext)
console.log(data) // here same props error occur
return (
<>
<NavbarContainer className="bp4-navbar">
</NavbarContainer >
</>
);
});