Next.js Discord

Discord Forum

Cannot display data on website

Unanswered
Максим posted this in #help-forum
Open in Discord
МаксимOP
import QuoteCard from "@/components/QuoteCard";
import { Quote } from "@/models/quote-card";

export default async function Page() {
    const response = await fetch("https://api.api-ninjas.com/v1/quotes", {
        headers: {
            "X-Api-Key": "",
        },
    });
    const data: Quote = await response.json();
    console.log("---------------------------------");
    console.log(data);
    console.log("---------------------------------");
    return (
        <QuoteCard
            author={data.author}
            quote={data.quote}
            category={data.category}
        />
    );
}


In the terminal: 

---------------------------------
[
  {
    quote: 'Communism has decided against God, against Christ, against the Bible, and against all religion.',
    author: 'Billy Graham',
    category: 'god'
  }
]
---------------------------------

2 Replies

МаксимOP
The data are not displayed on the website, does anyone know why?
Toyger
your api returned data is array with 1 item, if you want to get it:
const data: Quote = (await response.json())[0];