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;

Add the code for SearchResults as well. Possible culprit could be in that component. — Lakshya Thakur
– Lakshya Thakur, Commented Jun 28, 2020 at 7:19
Please double check that you are exporting and importing your components correctly. — hotpink
– hotpink, Commented Jun 28, 2020 at 7:21
Object(…) is not a function usually shows you at which line or component the error occurs. can you give us all the information you have in your error message? — Tim Gerhard
– Tim Gerhard, Commented Jun 28, 2020 at 7:26

shakeel70 · Accepted Answer · 2020-07-04 13:21:26Z

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;

Seraj Vahdati · Accepted Answer · 2020-06-29 03:57:17Z

0

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;

edited Jun 29, 2020 at 3:57

answered Jun 28, 2020 at 7:28

Seraj Vahdati

5124 silver badges13 bronze badges

3 Comments

Seraj Vahdati Over a year ago

is BooksAPI works fine? can you put the code of this method? @shakeel70

shakeel70 Over a year ago

Yes, BooksAPI is fine and works fine in searching the book. I am so confused as to where am I being wrong? Why is my entire function being interpreted as an object...

shakeel70 Over a year ago

the same error TypeError Object is not a function. Also, You did not have React in scope, edit that, and also, I commented SearchResults component just to see if that was causing the error, but its not, the error still persists after removing it.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related