0

I'm currently working on a website using Strapi as a CMS and Next.js(React) in Frontend. The site also has an image slider which obviousely contains an image, a headline and a description. These three things I now want to get from my Strapi Collection Type called Banner (Banners). I've tried so many times and read through every forum I could find, but it somehow still doesn't work. There's no error, but the data I want to display doesn't show up on the website. The following code is the one from \frontend\components\image-slider.js:

import React from "react";

const Slider = ({}) => {

const [banners, setBanners] = React.useState(null);

const getBanners = async() => {
  const res = await fetch("http://localhost:1337/banners");
  const json = await res.json();
  setBanners(json);
}

if(!banners){
  getBanners();
}

 if (typeof window !== 'undefined') {
    // Code for making slider work
    }
    return (
        <div className="img-slider">
            <div className="slide active">
                <div className="info">
                <div>
                    {banners ? banners.map((banner) => (
                        <div key={banner.id}>
                            <h2>{banner.title}</h2>
                        </div>
                    )) : (
                        <div>Loading...</div>
                    )}
                    </div>
                    <p>
                    {banners ? banners.map((banner) => (
                        <div key={banner.id}>
                            <h2>{banner.description}</h2>
                        </div>
                    )) : (
                        <div>Loading...</div>
                    )}
                    </p>
                    {/* <Image></Image>This I haven't tried yet. */}
                </div>
            </div>
            <div className="slide">
                {/* Same code as div before */}
            </div>
                {/* further slides */}
        
            <div className="navigation">
                <div className="btn-navig active"></div>
                <div className="btn-navig"></div>
                <div className="btn-navig"></div>
            </div>
        
        </div>
    )
}

export default Slider;

The type of how I currently try to get the data is from this StackOverflow answer. I hope someone is able to help me! Thanks a lot!

malu15
  • 7
  • 1
  • 7

1 Answers1

1

You have to put your API request (getBanners) in useEffect hook with [] as a dependencies (run only once - on load) like so:

React.useEffect(() => {
 const getBanners = async() => {
   const res = await fetch("http://localhost:1337/banners");
   const json = await res.json();
   setBanners(json);
 }

  getBanners();
}, [])
Rosen Tsankov
  • 86
  • 2
  • Hey, thanks a lot for your answer! But somehow the h2 element is still empty... Do I have to put your block of code under or above the return statement? Currently my code looks like following: const [banners, setBanners] = React.useState(null); React.useEffect(() => { const getBanners = async() => { const res = await fetch("http://localhost:1337/banners"); const json = await res.json(); setBanners(json); } getBanners(); }, []) Or is something wrong with how I get the data within the div? – malu15 Apr 24 '21 at 10:37
  • can you paste the payload from the api? – Rosen Tsankov Apr 24 '21 at 11:04
  • Sorry, what do you mean with that? I'm quite new to Strapi so... But here is the official Documentation about payloads.https://strapi.io/documentation/developer-docs/latest/development/backend-customization.html#webhooks The following links is the one to the api https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/content-api.html#api-endpoints – malu15 Apr 24 '21 at 11:36
  • if your "banner.title" is undefined or null it will not show. That's why you have to check the banner object. – Rosen Tsankov Apr 24 '21 at 11:41
  • Oh thanks a lot! Now it's working! I forgot to distinguish between upper and lower case. – malu15 Apr 24 '21 at 11:53