Fetching Data with React

In this section, we are going to use Axios inside React and fetch data from the endpoint we have tested with Postman.

Exercise 14.08: Creating a Controlled Component to Fetch Data

In this exercise, we will first need to update a functional component to a class-based component as we will need to initialize the state of the component. Then we will create a controlled search form component. We will then create an Axios request in order to fetch images using the NASA API. Perform the following steps:

1. Update the current functional App (used in the previous exercise) component to the class-based component. The code should now look like this:

   import React, { Component } from 'react';
   import './App.css';
   class App extends Component {
     render() {
       return (
     <div className="o-container">
         <h1>Search NASA images</h1>
     ...