Skip to main content

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

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

Initialize a React project

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.
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:
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
Now update the render method as shown below,
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:
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.

Comments

Popular posts from this blog

Build chatbot with node js and react js

User Experience is given a lot of attention while building any application these days. More and more brands are leveraging chatbots to service their customers, market their brand, and even sell their products. There are a lot of awesome tools out there which helps in building an intelligent bot very easily like Google’s DialogFlow, Amazon Lex, etc, most of which implement their own Natural Language Processing (NLP) logic. However, in some cases, we don’t really need an intelligent bot. Whenever we have a small application having a limited set of options to choose from, it’s not really necessary to use NLP based tools like Google’s DialogFlow. You need to integrate with them (which is pretty easy though), and you need to make a network call to get the results. Instead, you would want to define your rules locally in those cases. Here we will build a simple chatbot using React Simple Chatbot library and add it to our pizza-builder app using which we can build ou...

PHP Image Upload with Size Type Dimension Validation

File upload feature requires basic validations to  make clean and hygienic  the user input. There is a huge chance of exploiting a file upload option with malicious intent. Improper implementation of a file upload input increases security vulnerability. We need to validate the uploaded files before saving them on the server to reduce the vulnerability. I have created a HTML form and provided an option to upload files. When the form is submitted, the file binaries are sent to the PHP and validated in the server side. I have checked if the uploaded file is an image and I have specified the allowed image extension, size and dimension based on which the validation is taking place. After all these validations have passed, the image file is saved in the target location as specified. The server-side image file validation takes place in the following aspects. If the file is not empty. If the file extension is one of .jpg, .png, .jpeg. If the file size is le...

Foreach Loop in PHP

In PHP,  foreach  statement is used to iterate over a collection of data, like  PHP arrays . As per the name of this construct, it will keep on continue with the loop to traverse given input array for each of its element, without any condition. We have slightly touched about how this is working in PHP while seeing about  PHP loops . In this article, let us see about  foreach  statement with more details. Unlike other PHP loop statements,  while ,  do..while  and  for , this PHP loop statement  foreach  contains no counters, conditions and no need of increments or decrements, explicitly. Rather, it will iterate with each element and will be useful, where all the elements of the array to be traversed unconditionally. foreach  Usage in PHP Script We can use  foreach  statement in a PHP program with two various syntaxes differed based on the iteration behavior for getting array elements in the following t...