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 trial

JavaScript React Authentication (2019) Implementing Basic Authentication Set up User Registration

Help 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

Going 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.