Use State and Props in the Component Render Function
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.
[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.