Actualmente estoy usando react-slick slider para tener un componente de carrusel en mi sitio web y Strapi como mi CMS. Quiero completar este contenido a través de mi API CMS que estoy buscando. Normalmente uso este fragmento de código para completar mi contenido:
export default function Page({posts}) { return ( {posts && posts.map((team) => ( {posts.Title} ))} Pero aquí para mi <Slider> estoy usando este código y no puedo agregar mi función .map ya que la clase está extendiendo el componente:
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 }, }; } ¿Hay alguna manera de que pueda usar la función .map aquí para la imagen y el título en mi componente <Slider> ?
Agregué un sandbox de mi código, codesandbox.io/s/recursing-solomon-c20on?file=/src/Slide.tsx justo aquí. He puesto datos ficticios en la matriz de publicaciones, pero en realidad proviene de la llamada a la API getStaticProps.
No estoy seguro de si esto será útil tal como está. Pero esta es la idea general.
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 }, }; }