How to fetch data from a remote API in React.js

In this post, I will show you fetching data from a remote source inside your React.js application. So let’s create a brand new React project with 

fetch data from a remote API

Initialize a React project

1
2
3
$ npx create-react-app todos
$ cd todos
$ npm start

If you succeed in executing the above commands, you will see the default React page in the browser at http://localhost:3000.

Now Let’s get into the fetching remote data task, for the sake of simplicity, in this article, we will use the native fetch API that comes with the browser. It uses JavaScript promises to resolve the asynchronous response. 

Let’s create a brand new component called Todo, for this create a file called Todo.js with following code in the src directory.

1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from 'react';
 
class Todo extends Component {
 
    render() {
        return (
            <h1>Todos List</h1>
        );
    }
}
 
export default Todo;

Our todo component is ready to import, let’s import it into the App component, for the sake of simplicity I have removed all the default code from the App component render method, and the final version will be like below shown:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import './App.css';
import Todo from './todo/Todo'
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Todo />
      </div>
    );
  }
}
export default App;

And if you see the output of this state by visiting http://localhost:3000, it will show the Todos List text in the browser.

Now let’s define constructor() method and assign the initial state as shown below

1
2
3
4
5
6
constructor(props) {
    super(props)
    this.state = {
       todos: []
   }
}

Now update the render method as shown below,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    renderTodos() {
        let todoList = []
        this.state.todos.map(todo => {
            return todoList.push(<li key={todo.id}>{todo.title}</li>)
        })
 
        return todoList;
    }
 
    render() {
        return (
            <h1>Todos List</h1>
            <ul>
                {this.renderTodos()}
            </ul>
        );
    }

In the preceding code in the renderTodos(), we are iterating over the todos and pushing items into the todosList array.

Now let’s fetch the content from the remote API, for this componentDidMount() lifecycle method is the best place. So let’s define it:

1
2
3
4
5
6
7
8
9
10
    componentDidMount() {
        fetch('https://jsonplaceholder.typicode.com/todos')
            .then(response => response.json())
            .then(todos => {
                this.setState({
                    todos: todos.data
                })
            })
            .catch(error => console.log(error))
    }

In preceding code, we are calling the setState() method in the response of fetch API callback. and this will update the state of the component(todos) and it will trigger an extra rendering but it will happen before the browser updates the screen.  This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. 

Now if you visit http://localhost:3000, you will the todos list in the browser.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.