It’s a good practice to create a specific file that handles API calls. This can help keep your codebase clean and makes it easier to manage all API-related operations in one place. Create a file named api.js in your src directory:

// src/api.js

import axios from 'axios';

const API_BASE_URL = 'https://api.yourdomain.com';

const instance = axios.create({
  baseURL: API_BASE_URL,
  timeout: 1000,
});

// You can add common headers or auth tokens here
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

export const fetchData = async () => {
  try {
    const response = await instance.get('/endpoint');
    return response.data;
  } catch (error) {
    console.error('Error fetching data: ', error);
    // Handle errors here or throw them to be handled where the function is called
    throw error;
  }
};

Making an API Call from a React Component

Now you can use the fetchData function from the api.js in any React component. Here’s an example:

// src/App.js

import React, { useEffect, useState } from 'react';
import { fetchData } from './api';

function App() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchData()
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error loading data!</p>;

  return (
    <div>
      <h1>Data Loaded</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

Handling Errors

As shown in the component above, error handling is crucial when making API calls. You can handle errors within the API call function, or directly within the component, depending on how you prefer to manage error states in your application.

If you're only getting a single object as the response from your fetch instead of an array, just wrap it in an array -

this.setState({posts: [response.data]})

As Chris mentioned you have to create a function with name like update and paste axios up there:

import axios from "axios";
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

export default function App() {
    const [randomQuote, setRandomQuote] = useState('');

    const update = () => {
        axios
            .get(baseURL)
            .then((res) => {
                setRandomQuote(res.data);
            });
    };

    useEffect(update, []);

    if (!randomQuote) return null;


    return (
        <div>
            <QuoteCard
                quote={randomQuote.content}
                author={randomQuote.author}
                handleClick={update}
            />
        </div>
    )
}