Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

React array state is being returned as object

I am using a MUI Autocomplete field that takes an array for options.
I created this hook that takes the input value and fetches the API based on it.
This is the code for it:

import axios from "axios";
import { useEffect, useState } from "react";
export default function useFetchGames(searchString) {
  const [gameSearch, setGameSearch] = useState([]);

  useEffect(() => {
    if (searchString) setGameSearch(fetchData(searchString));
  }, [searchString]);

  return gameSearch;
}

const generateSearchOptions = (array) => {
  const tempArray = [];
  array.map((item) => {
    tempArray.push(item.name);
  });
  return tempArray;
};

async function fetchData(searchString) {
  const res = await axios
    .post("/api/games", { input: searchString })
    .catch((err) => {
      console.log(err);
    });

  return generateSearchOptions(res.data);
}

And then i am calling this hook in the component where i have the autocomplete element.

const searchOptions = useFetchGames(inputValue);

The issue is,useFetchGames is supposed to return an array since the state is an array. But whenever the input changes, i get an error that you cant filter or map an object. Basically Autocompolete element is trying to map searchOptions but it is not an array.
I even tried to log its type with log(typeof searchOptions); and it returns an object.
I dont understand what I am doing wrong.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Edit: Here is the log of res.data. it is an array of objects. That is why i am remapping it to an array of just the names.
enter image description here

>Solution :

you get the promise back when you invoked fetchData(searchString) as it is an async function which always return a promise back

I would do it as

useEffect(() => {
  // wrapping it as a async function so we can await the data (promise) returned from another async function
  async function getData() {
    const data = await fetchData(searchString);
    setGameSearch(data);
  }
  if (searchString) {
    getData();
  }
}, [searchString]);

also refactoring this generateSearchOptions function in order to remove the creation of temp array which I feel is not required when using a map – below as

const generateSearchOptions = (array) => array.map(item => item.name)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading