#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Using classes and state in React
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
In this lesson we're going to talk about classes in React and keeping state. So back to our app, here's where we left it off
0:12
before setting up the Django API. And the grid React app already came with an app class setup that extended from component
0:24
and component is from the React library. And the starter code only provided a render method. So let's start to keep track of some state
0:37
and in particular, three things: an array of all the tips, an array of the tips that will be shown based on a filter
0:45
and the filter string that's inputted by the user in the search box. So how do we keep track of state? First I'm going to set up a constructor.
0:58
And that's with the function-based component that takes a props object. As we inherit from component first and foremost, we need to go super
1:18
and pass the props upstream. Then we're going to initialize this state which is an object or, in Python, you would say dictionary.
1:34
And we're going to set the three objects we want to use: orgTips: [], showTips: [], filterStr: '',
1:51
So this will hold all the tips as created from the API by Axios and we will do that in the next video. This is our pristine copy, so to say.
2:04
And in show tips, we're going to filter the tips that are shown in the UI based on the string that the user types in the search box
2:13
which is held in filter string. We're going to define two of my foot stops which we will work on in the next videos.
2:22
And one is a standard method that comes with the React lifecycle and it's componentDidMount. And this method runs when the component output
2:39
has been rendered to the DOM. And here we're going to call the API using Axios and that's for the next video. Then I define an onFilterChange method
2:55
which gets an event. And it's going to filter the org tips into show tips. So the reason I have two arrays
3:13
is that show tips will reduce the amount of tips shown as I keep my copy in org tips. To demo this, when this fires
3:22
I'm going to log a message to the console onFilterChange called, so you can see when that hits. And I have a helper, filterTips
3:37
and you receive the arrow functions in text that takes a filter string and it's going to help filter the tips. Now this is not doing anything yet
3:57
because I have to use those methods and variables in the view, and as we've seen before you can use this template-like syntax
4:06
and then in variables in tags. So you can reference this state filter string and if this input field changes by the user typing in a string
4:21
I will call this onFilterChange and let's see that in action by opening up the console. And I don't need to put quotes here, nor here.
4:44
Okay? You see, when I start typing, for every char I type into this input box, onFilterChange is called.
4:55
So every time I type anything in this input box char by char, every time it's calling this event handler and it's going to filter the tips
5:05
based on my inputs dynamically. So this is not very useful yet because we are missing the real data. So the next video I'm going to use Axios
5:17
and the componentDidMount to call the API. One final resource: if you go to the React documentation there's a state and lifecycle page
5:29
and it explains what componentDidMount does. This method runs after the component output has been rendered to the DOM.
5:37
This is a good place to set up a timer and in our case, it's a good place to call Axios and retrieve data from an API.