Axios ?

Now it's Axios turn!
What is the Axios ? check the link below!

https://cchoimin.tistory.com/entry/Vuejs-Vue-Http-%ED%86%B5%EC%8B%A0-%EC%97%91%EC%8B%9C%EC%98%A4%EC%8A%A4axios%EB%9E%80 (Korean)

Let's do some real work.

• First, you have to import axios on the top of the Home.js file.
• Then, use componentDidMount() method to run some function(here is axios) with launch.
• Use axios.get() for mok database files and use .then() for running after .get() method.
• .then takes response from the database get by .get() method, as an argument named res in the render() method.

import React, { Component } from "react";
import axios from "axios";

export default class Home extends Component {
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
        console.log(res); // res.data has 100 of items
      });
    });
  }
  render() {
    //...
  }
}

• generating empty state.post array.
• Then use this.setState({}) method to update state.posts array.
• Now, declare the {posts} variable equal to newly updated state, this.state.
• Then set the boolean variable postList for using post.length to check there is posts.

import React, { Component } from "react";
import axios from "axios";

export default class Home extends Component {
  state = {
    posts: [],
  };
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
      this.setState({
        posts: res.data.slice(0, 10), 
        //this is only assigned 10 items in res.data
      });
    });
  }    
   
  render() {
    const { posts } = this.state;
    const postList = posts.length ? (
      //...
    ) : (
      //...
    );
    
    return (
		//...
    );
  }
}

• if we don't have any posts, we will show <div className="center">No posts yet</div>!!
• then post.map() function to select&return each item.
• other className is Materialize Style class convention!
• Lastly, we wanna return {postList}'s return!

import React, { Component } from "react";
import axios from "axios";

export default class Home extends Component {
  state = {
    posts: [],
  };
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
      //   console.log(res);
      this.setState({
        posts: res.data.slice(0, 10),
      });
    });
  }    
   
  render() {
    const { posts } = this.state;
    const postList = posts.length ? (
      posts.map((post) => {
        return (
          <div className="post card" key={post.id}>
            <div className="card-content">
              <span className="card-title">{post.title}</span>
              <p>{post.body}</p>
            </div>
          </div>
        );
      })
    ) : (
      <div className="center">No posts yet</div>
    );

    return (
      <div className="container">
        <h4 className="center">Home</h4>
        {postList}
      </div>
    );
  }
}