https://www.youtube.com/watch?v=-56x56UppqQ

https://www.youtube.com/watch?v=9OPP_1eAENg&list=PL4cUxeGkcC9jpvoYriLI0bY8DOgWZfi6u

AXIOS

import React, { Component } from "react";
import axios from "axios";
import Loading from "./components/loading";

class App extends Component {
  state = { todos: [] };
  async componentDidMount() {
    let result = await axios.get("https://jsonplaceholder.typicode.com/todos");
    await new Promise((x) => setTimeout(x, 1000));
    this.setState({ todos: result.data });
  }
  render() {
    return (
      <div className="container">
        {this.state.todos.length > 0 ? (
          <div>
            <ul class="list-group">
              {this.state.todos.map((todo) => (
                <li
                  key={todo.id}
                  class="list-group-item d-flex justify-content-between align-items-center"
                >
                  {todo.title}
                  <span class="">
                    <input type="checkbox" checked={todo.completed} />
                  </span>
                </li>
              ))}
            </ul>
          </div>
        ) : (
          <Loading />
        )}
      </div>
    );
  }
}

export default App;

Loading.js

import React, { Component } from "react";

const Loading = () => {
  return (
    <div className="spinner-border text-primary" role="status">
      <span className="sr-only">Loading...</span>
    </div>
  );
};

export default Loading;

https://www.youtube.com/watch?v=M-X0Jw2e68A