React.js br Tag and AJAX Request

Sep 15, 2020 • 6 Minute Read

Introduction

While working with a web app, you'll need to access data from the server. For that, you need to implement the AJAX call using either fetch() or another third-party library such as Axios. In React, you use the self-closing   tag to produce a line break between the text or a section, whereas in HTML you'd use  … . Through this guide, you will learn to use the   tag and AJAX calls in detail.

Implementing AJAX Calls

Data accessibility is a primary requirement for any web or mobile app to fetch the data from the server. Hence, you need to implement the AJAX call by providing the API URL from where you are going to bring the data.

AJAX Call Using fetch()

fetch() is an inbuilt API in the browser that allows you to make network calls based on XMLHttpRequest protocol, used to consume the resources across the network.

One of the most accessible options to make the network call is fetch(), where you need to provide the server URL along with the other parameters such as request header, request type, and so on.

Below is the simple syntax using fetch().

      fetch('API_URL')
  .then(response => response.json())
  .then(data => console.log(data));
    

Along with the fetch API, you need to pass the server API URL from where you fetch the resources. The response will return the result if you succeed; otherwise, you need to handle the error handling.

Below is the complete example to fetch the data from the server along with the error handling section.

      componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            users: result
          });
        },
        error => {
          // error handling
          console.log(error);
        }
      );
}
    

The above example uses one dummy API URL to fetch the data, and once the API is successful, the response used in your React component. Otherwise, the error section executes if the API fails to return the result.

AJAX Call Using a Third-party Library

You can apply to fetch() API, or else there are tons of third-party libraries available to make the network calls such as Axios.

You need to install the third-party libraries in the React app before using it. For example, you can install the Axios library using the below command.

      npm install axios

After installing the library, you can use the Axios package to make the network calls; below is the simple syntax that shows how to use Axios in the component.

      axios
    .get("API_URL")
    .then(function(response) {
    // use response
})
    

The syntax of Axios is the same as fetch(), where you need to pass the API URL followed by the then section where you can manage the response of the API.

Below is the complete example that shows how to use the Axios library.

      componentDidMount() {
    var self = this;
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(function(response) {
        self.setState({ users: response.data });
      });
}
    

As you can see in the above example, you can use the get() API call, followed by the API URL. Once the response comes from the server, the response data gets stored in the local state of the component.

You can manage the error handling is as shown below.

      componentDidMount() {
    var self = this;
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then(function(response) {
        self.setState({ users: response.data });
      })
      .catch(function(error) {
        console.log(error);
      })
      .finally(function() {
        // Always executed with the try block
      });
}
    

There are two additional sections added called catch() and finally() which manage the request/response error.

Using Tag in React

We use the   tag in HTML to break the string in between or break the section; hence, if you want to break the string, the   tag will be placed, and the followed content will move to the next line.

For example, there is one string, and you can use the  , as given below.

      <html>
 <body>
  <span>This is first one <br> This is second one</span>
 </body>
</html>
    

In between the  tag, there is one   tag placed. So, once you run the above example, the output should look like this:

      This is first one 
This is second one
    

But in React, the   is used differently, which means the br tag will be used as a self-closing tag, whereas in HTML, it can be used just like   to break the section.

      render() {
    return (
      <div>
        <p>BR tag in React</p>
        <hr />
        <span>SPAN1</span><br/>
        <span>SPAN2</span>
      </div>
    );
}
    

The above example uses two different tags:  and . In between them, there is a self-closing   tag used.

As you run the above example, all the sections will move to a new line rather than the same line of the DOM.

But if you use   without the slash, then you will get the following error.

      Expected corresponding JSX closing tag for 'br'.

Conclusion

AJAX calls are a vital part of any app to fetch the resources from the server, and the   tag is one of the solutions to break the section immediately after being used in between the DOM elements.

I hope this guide will get your attention to learn about the AJAX calls and using   tag in React efficiently. Keep learning!