# React Beginner- useData Hook (multiple results)

**URL:** <https://forum.codewithmosh.com/t/react-beginner-usedata-hook-multiple-results/20036>\
**Category:** React\
**Created:** [May 4, 2023, 2:57pm UTC](https://forum.codewithmosh.com/t/react-beginner-usedata-hook-multiple-results/20036 "2023-05-04T14:57:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Delphant](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/delphant/32/6202_2.png) [@Delphant](https://forum.codewithmosh.com/u/Delphant)\
**Post date:** [May 4, 2023, 2:57pm UTC](https://forum.codewithmosh.com/t/react-beginner-usedata-hook-multiple-results/20036/1 "2023-05-04T14:57:41Z")

</div>

Hello, I am trying to use a modified useData hook from the course that has multiple objects inside. In the course, all the data was in the results object, I’m wondering how I would add a second object with data.

JSON example

```auto
{"titles":{
    "recommend":{
"top": [
    {
        "title_description": "A young Han Solo tries to settle an old score with the help of his new buddy Chewbacca, a crew of space smugglers and a cunning old friend.",
        "title_id": 31536,
        "title_name": "Solo: A Star Wars Story"
    }
],
"new": [
{
        "title_description": " As the remnants of the Resistance flee Kylo Ren and the First Order, Rey seeks out Luke Skywalker – but he wants nothing more to dowith the Force.",
        "title_id": 31571,
        "title_name": "Star Wars: Episode VIII: The Last Jedi"
    }
]
}}}

```

In my useData, I changed results to recommend. In the test hook, I made for calling it, I added another interface for the two objects and sent that to my tsx.

```auto
import { useEffect, useState } from "react";
import testapi from "../Services/api-test";
import { AxiosRequestConfig, CanceledError } from "axios";

interface FetchResponse<T> {
  count: number;
  recommend: T[];
}

const useData = <T>(
  endpoint: string,
  requestConfig?: AxiosRequestConfig,
  deps?: any[] //dependencies, this is used for querying
) => {
  const [data, setData] = useState<T[]>([]);
  const [error, setError] = useState("");
  const [isLoading, setLoading] = useState(false);

  useEffect(
    () => {
      const controller = new AbortController(); //for cancellations

      setLoading(true);
      testapi
        .get<FetchResponse<T>>(endpoint, {
          signal: controller.signal,
          ...requestConfig,
        })
        .then((res) => {
          setData(res.data.recommend);
          setLoading(false);
        })
        .catch((err) => {
          if (err instanceof CanceledError) return;
          setError(err.message);
          setLoading(false);
        });
      return () => controller.abort();
    },
    deps ? [...deps] : []
  ); 
  return { data, error, isLoading };
};

export default useData;

```

useTest hook

```auto
export interface Items {
  top: Test;
  new: Test;
}

export interface Test {
  title_description: string;
  title_id: number;
  title_name: string;
}

//Hook Name = function => useData hook <Object> ("/endpoint")
const useTest = () => useData<Items>("/titles");

export default useTest;

```

When I try to map, I get an error in console saying “data.map? is not a function”  
Map in tsx:

```auto
{error && <div>{error}</div>}
        {data?.map((title) => (
          <ul key={title.top.title_id} style={{ margin: 0, padding: 0 }}>
            <div className={styles.title} onClick={() => navigate("/title")}>
              {title.top.title_name}
            </div>
          </ul>
        ))}

```

Is it with how the JSON is set up? Trying to map to an object and not an array?  
Thanks!

---

<div class="post-metadata">

**Author:** ![djb160](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/djb160/32/4881_2.png) [@djb160](https://forum.codewithmosh.com/u/djb160)\
**Post date:** [May 5, 2023, 11:20pm UTC](https://forum.codewithmosh.com/t/react-beginner-usedata-hook-multiple-results/20036/2 "2023-05-05T23:20:15Z")

</div>

I don’t see where your “data” is coming from in that last block of code. Is it a State variable somewhere?