CODEWITHSUNDEEP
javascriptreactjsnext.js
New
New

Reputation: 11

Data Fetching in Next.js

Let's say I wanted to fetch data from a website, and the link to that website is http://cookiestats.net/cookies, and the data on that link is this:

{"cookie-stats": {"eating": 1, "eaten": "6"}, "people-eating": {"current": 3, "total": "6"}}

What am I doing wrong?

export const getStaticProps = async () => {
    const res = await fetch('http://cookiestats.net/cookies');
    const data = await res.json();
    
    return{
        props: {cookies: data}
    }
}

const Cookies = ({ cookies }) => {
    return (
        <div>
            <h1>Cookie Data</h1>
            {Object.keys(cookies).map(cookies => (
                <div key = {cookies.cookie-stats}>
                    <a>
                        <h3>{cookies.eating}</h3>
                    </a>
                    </div>
            ))}
        </div>
    );
}

export default Cookies;

Upvotes: 0

Views: 116

Answers (1)

juakog
juakog

Reputation: 21

You are trying to map an object which is not possible. Instead you could try to use the method Object.keys:

 Object.keys(cookies).map(cookiesKey => (
     <div key = {cookies[cookiesKey]}>
         <a>
            <h3>{cookies[cookiesKey]}</h3>
         </a>
     </div>
 ))}

Upvotes: 2

Related Questions