import React, { useState, useEffect } from "react";
import { fetchHeroes } from "./api";
import "./styles.css";

const App = () => {
  const [heroes, setHeroes] = useState([]);

  useEffect(() => {
    fetchHeroes().then((data) => setHeroes(data));
  }, [setHeroes]);

  return (
    <div className="App">
      <ul>
        {heroes.map((hero) => (
          <li key={hero}>{hero}</li>
        ))}
      </ul>
    </div>
  );
};
export default App;