ReactJS error TypeError: Object(...) is not a function

Question

enter image description hereI am building this search component for searching books comparing them with a specific keyword user types. I have created this search function and it works perfectly well like this:

import React from 'react'

function Search() {
  return (
    <div>
      {console.log("Hello World")}
    </div>
  )
}

export default Search

But, when I add functionality to my code it breaks saying TypeError: Object is not a function. Here is the code that breaks:

import React, { useState, useEffect } from "react";
import * as BooksAPI from "../BooksAPI";
import Spinner from "./Spinner";
import SearchResults from "./SearchResults";

function Search() {
  const [showSearchPage, setShowSearchPage] = useState(false);
  const [searchItem, setSearchItem] = useState("");
  const [data, setData] = useState({});

  useEffect(
    async () => {
      const booksData = await BooksAPI.search(searchItem);
      setData({ data: booksData });
    },
    [searchItem]
  );
  return (
    <div className="search-books">
      <div className="search-books-bar">
        <button
          className="close-search"
          onClick={() => setShowSearchPage({ showSearchPage: false })}
        >
          Close
        </button>
        <div className="search-books-input-wrapper">
          <input
            type="text"
            placeholder="Search by title or author"
            value={searchItem}
            onChange={(e) => {
              setSearchItem({ searchItem: e.target.value });
            }}
          />
        </div>
      </div>
      <div className="search-books-results">
        <ol className="books-grid">
          {data.length !== undefined ? (
            <div className="search">
              <SearchResults data={data} />
              {console.log(data)}
            </div>
          ) : (
            <Spinner />
          )}
          <li />
        </ol>
      </div>
    </div>
  );
}

export default Search;

Answer 1

Thankyou all for helping. I resolved the issue myself. The issue was actually with the react version I was using 16.6 which did not support hooks and when I was using hooks it was giving errors. I deleted my node modules folder, changed my react version to latest in package.json, run npm install and the issue was resolved. This is the code now.

import React, { useState, useEffect } from "react";
import * as BooksAPI from "../BooksAPI";
import Spinner from "./Spinner";
import SearchResults from "./SearchResults";

function Search() {
  const [showSearchPage, setShowSearchPage] = useState(false);
  const [searchItem, setSearchItem] = useState("art");
  const [data, setData] = useState({});

  useEffect(
    () => {
      const func = async () => {
        const result = await BooksAPI.search(searchItem);

        console.log(result);
        setData(result);
      };
      func();
    },
    [searchItem]
  );
  return (
    <div className="search-books">
      <div className="search-books-bar">
        <button
          className="close-search"
          onClick={() => setShowSearchPage(true)}
        >
          Close
        </button>
        <div className="search-books-input-wrapper">
          <form>
            <input
              type="text"
              placeholder="Search by title or author"
              value={searchItem}
              onChange={(e) => {
                setSearchItem(e.target.value);
              }}
            />
          </form>
        </div>
      </div>
      <div className="search-books-results">
        {data ? (
          <div className="search">
            <ol className="books-grid">
              <SearchResults data={data} />
            </ol>
            {console.log(data)}
          </div>
        ) : (
          <Spinner />
        )}
      </div>
    </div>
  );
}

export default Search;

Answer 2

you need to change your setState method. you're using useState. you don't need to use previous setState method.

hope this is help you.

import { useEffect, useState } from "react";
import * as BooksAPI from "../BooksAPI";
import Spinner from "./Spinner";
import SearchResults from "./SearchResults";

const Search = () => {
  const [showSearchPage, setShowSearchPage] = useState(false);
  const [searchItem, setSearchItem] = useState("");
  const [data, setData] = useState({});

  useEffect(() => {
    handleGetData()
  }, [searchItem])
  
    const handleGetData = () => {
    BooksAPI.search(searchItem).then(result => {
        setData(result);
    });
}
  return (
    <div className="search-books">
      <div className="search-books-bar">
        <button
          className="close-search"
          onClick={() => setShowSearchPage(false)}
        >
          Close
        </button>
        <div className="search-books-input-wrapper">
          <input
            type="text"
            placeholder="Search by title or author"
            value={searchItem}
            onChange={(e) => {
              setSearchItem(e.target.value);
            }}
          />
        </div>
      </div>
      <div className="search-books-results">
        <ol className="books-grid">
          {data && data.length !== undefined ? (
            <div className="search">
              <SearchResults data={data} />
              {console.log(data)}
            </div>
          ) : (
            <Spinner />
          )}
          <li />
        </ol>
      </div>
    </div>
  );
}

export default Search;