Load a View Based on a Response In React
Introduction
Interacting with a server over HTTP is a core part of any web developer's job. Your user will navigate to a view within your app, expecting to see data presented to them in some manner. Sometimes this data is static and you don't have to request it from the backend. But most often, this data is dynamic or too large to store statically on the client. When this happens in your React app, it is necessary to use an HTTP client in order to make requests to the server containing the data you need.
In this guide, you will learn how to use the Axios HTTP client inside your React components in order to load a view based on a given response.
Let's get started!
Note: This guide assumes that you have already created or are working within a React app.
Requesting Data Over HTTP
The first part of loading a view based on an HTTP response is to download and start using an HTTP client. In this guide, we have chosen Axios as our HTTP client library of choice. There are many alternatives! Fetch is a great native client that you can use if you are trying to restrict the number of dependencies you are using in your app.
To download Axios, navigate to your root project directory where your package.json file is located, and run the command: npm install --save axios. Now you have Axios installed inside your React project and can start using it!
In the code below, you will see the basic shell of a DinosaurView component. This component's job is to request a list of dinosaurs from the server via HTTP and then render a list of Dino components based on the response.
1class DinosaurView Extends React.Component {
2 constructor(props) {
3 super(props);
4
5 this.state = {
6 dinosaurs: []
7 }
8 }
9
10 componentDidMount() {
11 ...
12 }
13
14 render() {
15 ...
16 }
17}You need to set our dinosaurs state based on a list of dinosaurs requested within the componentDidMount lifecycle method. The componentDidMount lifecycle method will ensure that the dinosaur data is only requested after the initial render of the DinosaurView component. This is helpful because you can display a simple loading screen while we wait for the request to complete.
Below is the updated code that shows how to use Axios to make a request to our private dinosaur API.
1import axios from 'axios';
2
3class DinosaurView Extends React.Component {
4 constructor(props) {
5 super(props);
6
7 this.state = {
8 dinosaurs: []
9 }
10 }
11
12 async componentDidMount() {
13 const dinoResponse = await axios.get(this.props.dinosaurUrl);
14 this.setState({ dinosaurs: dinoResponse.dinosaurs });
15 }
16
17 render() {
18 ...
19 }
20}Wow, that was easy! In the above code, you first imported the Axios HTTP client library. Then, you marked componentDidMount as an async function. This enables the use of theawait keyword in order to resolve the Promise returned from the call to axios.get. With the response successfully loaded, you then simply used the setState function in order to set the dinosaurs state of the component.
With your data requested, now it's time to load your view. Remember, this component simply wants to display a list of Dino components. This can be achieved by implementing the following render function.
1 ...
2
3 render() {
4 const dinosaurs =
5 this.state
6 .dinosaurs
7 .map(dino => <Dino name={dino.name} type={dino.type} roar={dino.roar} />);
8
9 return (
10 <ul>{dinosaurs}</ul>
11 )
12 }
13}Conclusion
HTTP is almost imperative when it comes to dynamically loading views inside your React app. In order to interact with servers via HTTP, you need to use some sort of HTTP client on the frontend. You can use Axios, the native Fetch client, or any of the other HTTP client NPM packages available for download.
Of course, HTTP isn't the only way! GraphQL is becoming a popular choice when it comes to loading views based on requested data from the backend. For more information about GraphQL, please check out the GraphQL documentation.