0

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.

enter image description here

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 >
    </>
  );
});
David-JSON
  • 35
  • 8

0 Answers0