Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJoseph Lander
Full Stack JavaScript Techdegree Graduate 27,765 PointsHelp to confirm why we import `Data` in `constructor()` and in `render()`
I am trying to fully understand why we reference data
twice to pass it down to the provider. I lack practise with classes and believe this is why I'm not confident of the reasons.
For reference:
...
import Data from './Data'; // <-- REF#1
const Context = React.createContext();
export class Provider extends Component {
constructor() {
super();
this.data = new Data(); // // <-- REF#2 added here
}
render() {
const value = {
data: this.data // <-- REF#3 added here in this object to pass down
};
return (
<Context.Provider value={value}>{this.props.children}</Context.Provider>
// <-- REF#4
);
}
...
}
So after importing we reference data for the second time in constructor
. I believe this is here so that you can "creating and initializing an object of that class." as mentioned in the mdn docs on constructors.
This appears to be how classes work rather than how React works as the React Docs - constructor()
don't list it as a reason to use the constructor.
Then we seem to have to create an object in the render()
function and reference data here before passing it down.
Q1 - I guess I am trying to secure in my knowledge, why we can't reference this.data
from the constructor directly?
My understanding is that the render()
function apparently only inspects this.props
and this.state
[ React Docs - render()
] so we have to create another reference point to finally be able to access these 'helper functions' we abstracted away.
So I also see that even if we kept those helpers
as methods in the Provider
class that it would still be potentially beneficial to wrap them in the value
object but we wouldn't have to and could send them down as individual methods.
Q2 - As a novice, I am always trying to learn the benefit of modularizing our code against all the extra steps and issues to link them. Does anyone have any insight from reading my thoughts they would add to this? I feel my lack of knowledge makes this feel repetitive and tricky and so believe I am not fully appreciating some elements.
Many thanks for reading this far, even if you have no comments!
1 Answer
Joseph Lander
Full Stack JavaScript Techdegree Graduate 27,765 PointsGoing over the past videos on creating context is helping cement my understanding: https://teamtreehouse.com/library/what-is-the-context-api
Moving forward through the videos rather than seeing it as repetition, it feels that we are concerned about scope
and feels similar to the rationale in the Object Oriented Programming section of the course.
Again, weigh in with your thoughts.