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:
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.