Covalent_API_Fetch_Tut.js

import { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
      getData()
  }, [])

  const getData = async () => {
    //Using fetch
    const response = await fetch("https://api.covalenthq.com/v1/chains/status/?key=your-api-key")
    const data = await response.json()
    setItems(data.data.items)
    
    //using axios
    /**
    try {
      const response = await axios.get('https://api.covalenthq.com/v1/chains/status/?key=your-key');
      console.log(response.data.data);
      setItems(response.data.data.items)
         } catch (err) {
      // Handle Error Here
      console.error(err);
     }
     **/
  }

  return (
    <div className="App">
      {console.log(items)}
      Welcome 
      <ul>
        {items.map(item => (
          <li key={item.chain_id}>
            {item.name}
          </li>
        ))}
      </ul>
      </div>
  );
}

export default App;