FREELessons: 11Length: 1.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

6.2 Using Ajax in Your Components

There are many ways to use Ajax in your components. The most common is with a higher-order component—wrapping your component within another component, which will handle the HTTP requests and responses.

6.2 Using Ajax in Your Components

Ajax is a very important part of web applications. And so when it comes to incorporating ajax with your react components, well things can become not so straight forward. Especially if you are working with stateless components, because if you think about it, making an http request, getting data and then using that data in your component. Well, all of that makes you think that you need state. And you do, in order to store that information and then update that information as other ajax requests are made. You need to update the state in order for your react component to re-render. So if you're using stateless components, well, how do you do that? So we're going to look at probably the most popular method of incorporating ajax into your components, and it's really quite simple. We're going to start by creating a navbar. We're going back to bootstrap, so we are going to create a bootstrap based navbar. So let's create a new file. And we will just call this navbar.js. And this is going to be the inside of the source folder. By the way, I have the dev server already up and running, so as I add files and save them, it's going to compile them behind the scenes. And of course, there are going to be some errors until everything is in place. So the first thing we want to do is import React inside of this file because we need to use React to create our components. So we want to import React from react. And then these components are going to be stateless. You know, if we can get away with making something stateless, then let's do that. So we're going to create a function called Navbar and then we will have another function called NavbarItem. So it's kinda like the menu that we've been working with as well as some of the other components where we will have our main component that is using smaller components. So as far as our navbar is concerned we want to retrieve all of the items that we're going to display within the NavbarItem. And in fact, let's go ahead and start with the Navbaritem, so that we can at least see what an item is going to look like. So we're going to return, we're going to have a li element. And inside of this li element, we will have an a element. We will have an href, which we will get from our props. So we will say props.href. And if we wanted to set some other attributes, we could do that here. But as far as this is concerned, we're just going to have the href and the text. Now of course, the href isn't going to point to a valid file in this example. And that's perfectly fine. It's just there so that we can get an idea of retrieving the information to populate our navbar, and there would be a URL there. So whenever we clicked on it it would take us to that URL. So this is our NavbarItem, and as far as the navbar itself I am going to copy and paste that in because it's quite a bit of mark up. But here's the thing, we have a nav element with a class of navbar and navbar-default. Then we have a fluid container inside of that. Then we have our collapsible navbar which is inside of that. And then finally We have our nav that's of course a ul element and then we're going to have our items there. So let's build our items. We'll say let items =, and we'll say, and our function is going to need the individual item as well as the index. And then we will just use our NavbarItem, so NavbarItem. And we'll st the key = to our index, and then we will just pass in the item. So we're going to have two properties. We're going to have an href property and a text property. And let's close that element and there we go. So as far as these components are concerned they're very simple. But they are also stateless. And that's really what we want. We want to supply information to these components, so they can be displayed. BUt before we make our HTTP requests let's make sure that this navbar component works. We first of all need to export this. So let's do export default function navbar. And we don't need to export navbar item because, well, we are only using that here inside of navbar. So let's go to app.js. Let's import navbar from, and then navbar. And I've already pre-defined these items here. So whenever we render this, we're going to say navbar, we'll say items =, and then items, and everything should work. So if we go to the browser, there it is. We have Home, we have About, and Contact. So everything's working there. And let's look at the JSON file. So here we have menu-items.json. And we have three things. Ajax Home, Ajax About, Ajax Contact. The reason why it says Ajax is so that we know that we are pulling that information from this file, as opposed to the items that have been defined inside of app.js. So let's write a component that is then going to wrap around our navbar, because that's essentially what we need to do. Now we're not gonna create a higher border component. Instead, we're just going to have a component that wraps around navbar. So let's create a new file. We'll call this ajax navbar.js. And we will import React from react. We also want to import Navbar from navbar. And then we will export default class extends React.Component. And let's go ahead and define our constructor, we'll get props, we'll call super, and pass in props. And then we need state. So whenever we make our request, when we receive a response and parse that into a JavaScript object, then we want to set our state, which will then rerender our menus. So let's call this, for a lack of a better term data, and it's going to be an array of items, so we will initialize that as an empty array. Let's go ahead and write the render method as well, because this is going to be rather simple. We'll simply return a Navbar, we'll set Items = to Nothing else. So we are just simply wrapping around navbar. Now the question is, when do we make our request. Do we do it here inside the constructor? Well, no, we don't. We wait for the component to be rendered within the document. And then when that happens, we know that the component did mount method executes, and then we will make our request. So, we will use fetch here. And we're going to pass a prop called url, that's going to contain the URL that we want to retrieve here. So we're going to use that, and then we are going to get the response. And we are going to convert that to an object, and so then, whenever we have that object, we are going to set our state. So we'll simply say this.setState, we'll set data Equal to whatever has passed to this function. So it's rather simple. Nothing overly complex here. So whenever we go to app.js, we aren't going to have Navbar, we're gonna call this AjaxNavbar. Although I guess we could call it navbar, but I like having some distinction here. And instead of passing in the items, we are going to pass in the url. This is going to be our menu-items.json. And this, of course, needs to be AjaxNavbar. So let's save this. If we go to the browser, we should see Ajax Home, Ajax About, Ajax Content. That's exactly what we saw. So whenever you want to use Ajax with your components, there are other alternatives. But the most common way is to make your request in a parent container. Now some people will tell you to do that at the root of your application, but that's not necessary. I like the idea of having a self contained component, so that a component does everything that it needs to do. Such as our AjaxNavbar. I think it makes more sense for the AjaxNavbar to make that request and then pass on the data to the navbar component.

Back to the top