Ray Kholodovsky - Here is an error from trying ...
Here is an error from trying to do a simple react context implementation and no ts errors yet tsci error, followed by a different error on refresh. Next I will try to redo the code to look more like the tsci react context doc and see if this persists.
9 Replies
Also, I think the current iteration of these docs got too complex or too "down some rabbit hole of one particular usage scenario"
https://docs.tscircuit.com/guides/typescript-guide/using-react-context-to-avoid-prop-drilling
I would love a working demo/ example of the simplest possible case, which is what I'm trying to do:
tldr as I understand it is
import { createContext } from 'react';
export const MoleculeContext = createContext<ReturnType<typeof calculateMolecule> | null>(null);
wrap
<MoleculeContext.Provider value={moleculeResult}>
around
<board ...
and then in the higher up usage:
import { useContext } from 'react';
import { MoleculeContext } from "@molecule-templates/src/MoleculeBuilder";
const molDef = useContext(MoleculeContext);
that's pretty much the code I have above that shouldn't be erroring in tsci, but is.Using React Context to Avoid Prop-Drilling | tscircuit docs
React Context is a powerful tool for sharing data across deeply nested components without having to pass props through every level of the tree. When building TypeScript-powered circuit design tools, context lets you centralize configuration and provide well-typed data to any component that needs it.
yea i think youre usage is correct
and would need to do that across separate files to truly replicate my usage
so yeah the current tsci error is
oh actually you might have an issue https://react.dev/errors/321
Minified React error #321 – React
The library for web and native user interfaces
or oh ok
cannot read properties of null- that means your context isn't set
hmmm....
I have
which fundamentally matches my understanding of where it's supposed to be set. and moleculeResult is already calculated in functions above otherwise we would have no molecule 🙂
so again to my point, this example seems overly verbose and I don't know whether I have to do it that way or if it should be fine my way.
Hence, req for doc and demo of minimum working example
oh. I'm wrapping <board> with the context provider but I'm trying to access the context from outside the <Molecule component. Perhaps that's why the context is not reachable. I wil look into it.
yes there should be a working example at the bottom as well, i think it's pretty similar. There's an object defined (in your case it'll be computed) and the child components use it
yeah I'm looking at the bottom example under Key Takeaways and I suspect the gem I need is somewhere in there. Working on figuring it out.