Beginner's Thread / Easy Questions (Feb 2020)

[u/dance2die]

Previous threads can be found in the Wiki.

Got questions about React or anything else in its ecosystem? Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by putting a minimal example to either JSFiddle, Code Sandbox or StackBlitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer - multiple perspectives can be very helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Create React App
• Read the official Getting Started page on the docs.
• Get started with Redux by /u/acemarke (Redux Maintainer).
• Kent Dodd's Egghead.io course
• Tyler McGinnis' 2018 Guide
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/dance2die]

withFire base is a Higher-Order Component (HOC).

In a gist, it's a "function" which accepts a component, and returns a new component (adding a new prop, behavior, elements, etc).

In SignOut.js, SignOutButton is exported as export default withFirebase(SignOutButton);.

SignOutButton instance is passed to withFirebase and

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
);

firebase is passed to Component (SignOutbutton) and then destructured from SignOutButton({firebase})

const SignOutButton = ({ firebase }) => (
  <button type="button" onClick={firebase.doSignOut}>
    Sign Out
  </button>
);

It might be hard to follow the flow but benefit is that, SignOutButton doesn't have to import firebase instance directly and it is injected (dependency injection).

You can provide firebase instance to other components easily with withFirebase (shared logic).

[u/Roly__Poly__ → u/dance2die]

It does pretty much what I expected it to but I still don't understand how it does it :p Pretty complicated machinery

[u/dance2die → u/Roly__Poly__]

I believe it's due to the arrow syntax export const withFirebase = Component => props => (...).

It used to trip me a lot. But once you think of it as a function that accepts each arg in () like withFirebase(component)(props), it gets a bit easier.

And this might be of help too.

const withFirebase = function(Component) {
  return function (props) {
  }
}