How can I integrate API data into my React application?

How can I integrate API data into my React application?

You can use the fetch API or libraries like Axios to retrieve data from an API in your React app.

Can you show me a simple example using fetch?

Sure! You can use useEffect to fetch data when the component mounts. Here's a basic example:

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return <div>{JSON.stringify(data)}</div>;
};

What if I need to handle loading and error states?

You can add loading and error states using additional state variables. Here's an updated example:

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

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>{JSON.stringify(data)}</div>;
};