import React from "react";
import axios from "axios";
// import Home from "./components/Home";
class App extends React.Component{
    state = {
        datas: []
    }
    componentDidMount() {
        axios.get(`https://swapi.co/api/people/`)
          .then(res => {
            const datas = res.data;
            console.log(datas);
            this.setState({ datas });
          })
    }
    tableList(){
        return this.state.datas.map((data, i) => {
            return(
                <div>
                    <tbody>
                        <tr>
                            <th scope="row">{data[i].id}</th>
                            <td>{data[i].name}</td>
                            <td>{data[i].height}</td>
                            <td>{data[i].mass}</td>
                            <td>{data[i].skin_color}</td>
                            <td>{data[i].hair_color}</td>
                        </tr>
                    </tbody>
                </div>
            );
        });
    }
    render(){
        return(
            <div className="container">
                <table className="table" style={{backgroundColor: "purple", color: "white"}}>
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Height</th>
                            <th scope="col">Mass</th>
                            <th scope="col">hair color</th>
                            <th scope="col">Skin color</th>
                        </tr>
                    </thead>
                    {this.tableList}
            </table>
            </div>
        );
    }
}

export default App;