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


Talk Python's Mastodon Michael Kennedy's Mastodon