Why my react-query request data won't show?

Question

This is my first time using react-query and I having problem request data from API.

This is the code:

import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import "./App.css";

function App() {

  const fetchData = async () =>{
    const { data } = await axios.get("https://api.jikan.moe/v4/anime");
    const response = data.data;
    return response
  }

  const { isLoading,data,isError } = useQuery(
    ["posts"],
    fetchData,
      {
        retry: false,
        refreshInterval: 0,
        staleTime: 0
      }
  );
  if (isLoading) return <h1>...Loading</h1>;
  if (isError) return <h1>Fail</h1>;
    
  console.log(data)

  return (
    <div className="App">
      {data.map((datas)=>{
        <div>
          {datas.title}
        </div>
      })}
    </div>
  );
}

export default App;

When I console.log(data) it does show the list of data Array of 25 object element. But when I try the use data.map to show the data in the web site nothing appear but It does appear if I only try the show one of the array like

{data[0].title}

the data does appear but when I try the show all array element with data.map but nothing seems to appear. Can someone help me?

kind user · Accepted Answer · 2023-02-07 14:15:59Z

3

the data does appear but when I try the show all array element with data.map but nothing seems to appear. Can someone help me?

Your Array#map does not return anything.

 {data.map((datas) => {
    return ( // return the JSX
      <div>
        {datas.title}
      </div>
    );
 })}

answered Feb 7, 2023 at 14:15

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Lee Over a year ago

oh yeah, thanks. But is this a react-query thing? cause I don't remember that I have to return anything when using normal useEffect fetch.

kind user Over a year ago

@JoshLee Nop, it's just related with the syntax. Nothing to do with react-query :)

Josh Lee Over a year ago

oh ok, thanks mate appreciate it for your help. :)

Collectives™ on Stack Overflow

Why my react-query request data won't show?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related