Using .map to load API data into Slick-Slider Component

Currently I’m using react-slick slider to have a carousel component in my website and Strapi as my CMS. I want to fill in this content through my CMS API that I am fetching. Normally I use this piece of code to fill in my content:

export default function Page({posts}) {
  return (
    {posts &&
            posts.map((team) => (
               {posts.Title}
      ))}

But here for my <Slider> I am using this piece of code and can’t add my .map function since the class is extending component:

export default class BlogPost extends Component {
  render() {
    var settings = {
      dots: true,
      infinite: false,
      speed: 500,
      slidesToShow: 4,
      slidesToScroll: 4,
      initialSlide: 0,
      nextArrow: <SampleNextArrow />,
      prevArrow: <SamplePrevArrow />,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true,
            dots: true,
          },
        },
      ],
    };

    return (
      <>
        <div>
          <Slider {...settings}>
            <div>
              <img style={{ width: "90%" }} src="/countries1.png" />
              <div
                style={{
                  minHeight: "100px",
                  padding: "30px",
                  textAlign: "center",
                }}
              >
                <div>
                  Reasons to Acquire Antigua & Barbuda Citizenship by Investment{" "}
                </div>
                <br />

                <div>Read More</div>
              </div>
            </div>
            <div>
              <h3>2</h3>
            </div>
          </Slider>
        </div>
      </>
    );
  }
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}

Is there any way I can use the .map function here for the image and title in my <Slider> component?

Ive added a sandbox of my code, codesandbox.io/s/recursing-solomon-c20on?file=/src/Slide.tsx just here I’ve put in dummy data in posts array but in actual it is coming from getStaticProps API call

Answer

Not sure if this will be of use as-is. But this is the general idea.

const sliderSettings = {
  dots: true,
  infinite: false,
  speed: 500,
  slidesToShow: 4,
  slidesToScroll: 4,
  initialSlide: 0,
  nextArrow: <SampleNextArrow />,
  prevArrow: <SamplePrevArrow />,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true,
      },
    },
  ],
};
export default class BlogPost extends Component {
constructor(props) {
super(props);
this.state = {posts: []};
  }
  componentDidMount() {
    getStaticProps().then(data => {
      this.setState({
        posts: data.props.posts
      });
    });
  }
  getSlides() {
    return this.state.posts.map((post) => {
      // ... generate divs and imgs here.
    })
  }
  render() {
    const slides = this.getSlides()

    return (
      <>
        <div>
          <Slider {...sliderSettings}>
            {slides}
          </Slider>
        </div>
      </>
    );
  }
}

export async function getStaticProps() {
  const res = await fetch("http://localhost:1337/blogs");
  const posts = await res.json();

  return {
    props: { posts },
  };
}