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

class App extends Component {
  constructor() {
    super();
    this.state = {
      heroes: [],
    };
  }

  componentDidMount() {
    fetchHeroes().then((data) => {
      this.setState({
        heroes: data,
      });
    });
  }

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