#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Calling the tips API using axios

Login or purchase this course to watch this video and the rest of the course contents.
0:01 One thing I forgot to mention in last lesson
0:03 was the binding of our new methods.
0:11 So in JavaScript, class methods are not bound by default.
0:15 So an example here, we see the handle click
0:18 which was defined as an extra method on the class.
0:22 Got this bind this.
0:25 So let's do that to make sure we don't run into any bug.
0:31 Going back to my constructor.
0:37 I just define if filter change
0:42 this.onFilterChange = this.onFilterChange.bind(this);
0:50 and we do the same for the other method
0:51 that we defined which was filter tips.
1:07 Page still loads.
1:08 And with that out of the way
1:10 let's go back to componentDidMount
1:12 and start to call Axios
1:14 to retrieve tips from the API.
1:18 As shown in a previous video
1:21 the API is now running on local host port 8000.
1:26 So we can start querying that endpoint.
1:31 First let's set up a constant
1:34 called tips endpoint
1:38 and you should remember it was under API.
1:42 Next we need to import Axios.
1:46 So I'm going to make a constant access variable
1:49 require Axios and we already installed it
1:54 at the beginning of this lesson
1:58 and now I can use it in componentDidMount.
2:05 It's pretty straightforward;
2:06 we can call the GET method on Axios
2:11 give it the TIPS_ENDPOINT
2:14 and do a bit of method chaining.
2:16 So if this works
2:21 we are going to do something with the response.
2:25 And if it doesn't work
2:27 you're going to catch an exception.
2:33 And I'm basically just going to log that to the console.
2:45 Now, something very important, as I mentioned before
2:48 immutipility is an important thing in React
2:51 so that means that you would never set a state like this.
2:59 You can do it technically
3:01 but it's not how things are done in React.
3:05 React has a special method setState
3:09 and not only does it set the internal state
3:13 as defined in a constructor
3:15 it also re-renders the view
3:17 which is the main thing with those single page apps
3:20 that they refresh on the fly
3:22 no page refreshes required.
3:24 So setState handles that in the background.
3:28 So whenever we want to update state
3:30 we need to use this setState method.
3:33 And you will see that in the second hangman project
3:36 a lot as well.
3:39 And this is as simple as giving it
3:41 the new values in an object.
3:45 And in this case I'm going to set both arrays
3:48 the orgTips and the showTips
3:49 to the full response data.
3:55 Because remember this is our pristine copy
3:57 and the showTips is the one we're going to filter
4:00 based on what the user types in the search box.
4:06 Now there's a lot more curly braces than Python
4:08 so it's easy to make a syntax error.
4:12 But having the console open in the browser
4:15 I would easily spot that.
4:17 This is not going to do anything yet
4:19 because also here we want to render the tips
4:23 in the view so going back to render
4:28 where we had those static tips
4:30 we're going to get rid of this.
4:34 And we should remember from the JSX
4:36 in the tip component, JSX supports embedded JavaScript
4:41 which is very cool.
4:44 So we can now define an arrow function
4:46 to loop over the tips.
4:49 So this state showTips on the filtered ones
4:54 I can call map on that array doing something
4:57 with each tip.
4:58 And I just got map in the JSX refresher.
5:07 And we want to do an enumerate to get the tip
5:11 and the index.
5:17 One thing I forgot to mention when I spoke
5:21 about the structuring, is the ... notation
5:24 which is similar in Python to the *.
5:28 Remember in Python where you want to
5:30 tuple unpack a list of five into three elements
5:35 and you would say put the rest into c?
5:44 Well JavaScript has something similar
5:48 but instead of the star it uses ...
5:51 And I'm going to use that to parse all the properties
5:55 to the tip component writing this code.
5:59 Pretty nice. So all the attributes of tip
6:03 so the text, the code, the links I can parse
6:07 into tip using ...
6:09 The enumeration with index is because every tip in the list
6:14 needs to have a unique identifier which will be
6:17 the number of the iteration.
6:23 And I'm also going to parse the filter string
6:26 because later we will use that to do some highlighting
6:29 on the matching string. And this should be it.
6:45 Give it some indenting. And I have a syntax error.
6:50 And as there's an arrow function
6:52 I'm using the fat arrow. Awesome, look at that!
6:56 All the tips are shown in our front-end.
7:02 All with their text, code and optional links;
7:06 sometimes there's a reference link.
7:09 And this data is queried directly from the API.
7:12 Which we can confirm because we got
7:14 a 200 response from Django's app server.
7:18 And it didn't require a lot of code.
7:20 So we called Axios in the componentDidMount
7:25 it was like ten lines of code.
7:27 And then we set the state to update your arrays
7:32 with the response data.
7:34 Then in the view, only three lines of code
7:37 we were able to loop over the tips
7:40 using an arrow function and calling the component
7:43 for each loop.
7:45 And of course the tip component is way more code
7:48 but that is now abstracted away which we not only can
7:51 use here but we could also import it into other web pages.
7:55 Which is a nice example of the re-usability
7:57 of React components. We cannot filter anything yet
8:02 so that's what we're going to code in the next video.