DEV Community

Discussion on: What is React Prop Drilling and Context API

seljumnik profile image

I have an easier solution. Create some folder structure such as src/context/PenContext.js, and inside the PenContext file import createContext function and write:

export default PenContext = createContext( { penName: "Blue Gel Pen" } );

FirstBench component can now import PenContext and use it as in const penContext = useContext(PenContext).

That's all, it just works without ever using the Provider wrapper around anything. In case the pen's name had to be changed in FirstBench, it can always be easily modified by changing "penContext.penName".

Now, perhaps there's something I'm missing out on for not wrapping stuff in the Provider component? If so, please advise me, I'd be grateful.