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