Fetching API data with React Hooks - Build a React App using Basic Hooks

BookContext.js

const BookContextProvider = ({ children }) => {
  // ...

  // add
  const getBooks = async () => {
    const res = await fetch(
      'https://jsonplaceholder.typicode.com/posts?_start=2&_limit=5'
    );
    const data = await res.json();

    setBooks([...books, ...data]);
  };

  // ...

  return (
    <BookContext.Provider value={{ books, getBooks, addBook, deleteBook }}> // add getBooks
      {children}
    </BookContext.Provider>
  );
};

BookList.js

import React, { useContext, useEffect } from 'react'; // add useEffect
// ...

const BookList = () => {
  const { books, getBooks, deleteBook } = useContext(BookContext); // add getBooks

  // add
  useEffect(() => {
    getBooks();
  }, []);

  return (
    // ...
  );
};