Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use State and Props in the Component Render Function

    Shane OsbourneShane Osbourne

    Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.

    reactReact
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 In this example, we're rendering a user card that is based on some data that we fetched from GitHub's API. We've got a component here, it has a constructor with some initial state viewset.

    00:11 When the component is mounted in the page, we use fetch to get the response from GitHub, pass it as JSON, and then we set the state on this component, and then we render the user card once the data arrives, or a please wait sign if we're still in a loading state. Now what you'll notice here is there are quite a few references to this.state.

    00:35 This is something that preact can actually help us out with. Unlike React, in preact, we actually get to use two arguments from the render method, we have props and state. These are just provided as a convenience to you.

    00:51 We can remove this.state to make it a little bit shorter, we can even go one step further and use destructuring here to pull off just the properties of the local state that you're interested in. In our case, we just want loading and user. We can say loading and user.

    01:13 Now we can get rid of this altogether, and both of these, hit save, and you can see it's still working as it did before. Now the same thing applies for props too, so let's change this please wait text here to actually display the URL that we're currently fetching.

    01:29 If we look back in the index file, we actually pass through this.config.urls.user, that means on the props we can get config, and then we can say fetching config.urls.user, save, and it's gone in a flash. If we just set a quick timeout on this so we can see it, and there you see the loading message for two seconds followed by the user card.

    Discuss

    Discuss