How to get one collection-type entry by id?

Questions and Answers
1

Hello :grin:
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 already created a function to do that, but it only returns all three entries (all titles of all Id’s for example). So how can I filter the reqeust to get only one entry from one specific Id? The current code looks like the following: (file: /components/image-slider.js)

 import React from "react";
const Slider = ({ }) => {

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();
   }, [])

 if (typeof window !== 'undefined') {
    // makes image slider working
}
return (
    <div className="img-slider">
        <div className="slide active">
            <div className="info">
                    {banners ? banners.map((banner) => (
                            <h2 key={banner.Id}>{banner.Title}</h2>
                    )) : (
                        <div>Loading...</div>
                    )}
                    {banners ? banners.map((banner) => (
                            <p key={banner.Id}>{banner.Content}</p>
                    )) : (
                        <div>Loading...</div>
                    )}                   
             </div>
             {/* Until now I didn't try to get an image, because of the error I'm currently facing */}
        </div>
        <div className="slide">
        <div className="info">
                    {banners ? banners.map((banner) => (
                            <h2 key={banner.Id}>{banner.Title}</h2>
                    )) : (
                        <div>Loading...</div>
                    )}
                   {banners ? banners.map((banner) => (
                            <h2 key={banner.Id}>{banner.Content}</h2>
                    )) : (
                        <div>Loading...</div>
                    )}
            {/* Until now I didn't try to get an image, because of the error I'm currently facing */}
            </div>
        </div>
        {/* Futher 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;

I hope someone is able to help me! Thanks a lot!

System Information
  • Strapi Version: 3.5.4
  • Operating System: Windows 10 Pro Education
  • Node Version: v14.16.1
  • NPM Version: 6.14.12
  • Yarn Version: 1.22.10