SHARE
TWEET

Untitled

a guest Aug 22nd, 2019 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from "react";
  2. import axios from "axios";
  3. // import Home from "./components/Home";
  4. class App extends React.Component{
  5.     state = {
  6.         datas: []
  7.     }
  8.     componentDidMount() {
  9.         axios.get(`https://swapi.co/api/people/`)
  10.           .then(res => {
  11.             const datas = res.data;
  12.             console.log(datas);
  13.             this.setState({ datas });
  14.           })
  15.     }
  16.     tableList(){
  17.         return this.state.datas.map((data, i) => {
  18.             return(
  19.                 <div>
  20.                     <tbody>
  21.                         <tr>
  22.                             <th scope="row">{data[i].id}</th>
  23.                             <td>{data[i].name}</td>
  24.                             <td>{data[i].height}</td>
  25.                             <td>{data[i].mass}</td>
  26.                             <td>{data[i].skin_color}</td>
  27.                             <td>{data[i].hair_color}</td>
  28.                         </tr>
  29.                     </tbody>  
  30.                 </div>
  31.             );
  32.         });
  33.     }
  34.     render(){
  35.         return(
  36.             <div className="container">
  37.                 <table className="table" style={{backgroundColor: "purple", color: "white"}}>
  38.                     <thead>
  39.                         <tr>
  40.                             <th scope="col">#</th>
  41.                             <th scope="col">Name</th>
  42.                             <th scope="col">Height</th>
  43.                             <th scope="col">Mass</th>
  44.                             <th scope="col">hair color</th>
  45.                             <th scope="col">Skin color</th>
  46.                         </tr>
  47.                     </thead>
  48.                     {this.tableList}
  49.             </table>
  50.             </div>
  51.         );
  52.     }
  53. }
  54.  
  55. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top