React Js API Data Fetch Using Axios – Sample Code

API data fetching in React JS app can be easily implemented with the help of Axios package. Here is a sample react app code using axios for getting data from REST API.

index.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import ScotchInfoBar from './ScotchInfoBar';
import './styles.css';

function App() {
  const [books, setBooks] = useState(null);

  const fetchData = async () => {
    const response = await axios.get(
      'https://www.anapioficeandfire.com/api/books?pageSize=30'
    );

    setBooks(response.data);
  };

  return (
    <div className="App">
      <h1>Game of Thrones Books</h1>
      <h2>Fetch a list from an API and display it</h2>

      {/* Fetch data from API */}
      <div>
        <button className="fetch-button" onClick={fetchData}>
          Fetch Data
        </button>
        <br />
      </div>

      {/* Display data from API */}
      <div className="books">
        {books &&
          books.map((book, index) => {
            const cleanedDate = new Date(book.released).toDateString();
            const authors = book.authors.join(', ');

            return (
              <div className="book" key={index}>
                <h3>Book {index + 1}</h3>
                <h2>{book.name}</h2>

                <div className="details">
                  <p>👨: {authors}</p>
                  <p>📖: {book.numberOfPages} pages</p>
                  <p>🏘️: {book.country}</p>
                  <p>⏰: {cleanedDate}</p>
                </div>
              </div>
            );
          })}
      </div>

      <ScotchInfoBar seriesNumber="7" />
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

ScotchInfoBar.js

import React from "react";

export default function ScotchInfoBar(props) {
  return (
    <div
      style={{
        position: "fixed",
        top: "0",
        left: "0",
        right: "0",
        fontSize: "14px",
        padding: "20px 10px",
        background: "#333",
        color: "#bbb",
        letterSpacing: "0.5px"
      }}
    >
      Scotch.io Code Challenges!{" "}
      <a
        href=""
        style={{
          color: "#40A8F3",
          textDecoration: "none",
          display: "inline-block",
          padding: "0 0 3px",
          borderBottom: "2px solid #40A8F3"
        }}
      >
        Day {props.seriesNumber} of #10DaysOfReact
      </a>
    </div>
  );
}