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
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 },
};
}