Estoy tratando de implementar https://www.npmjs.com/package/react-multi-carousel para un componente de la tarjeta que tiene datos provenientes de una API de descanso. ¿Hasta ahora mi código es el siguiente, pero el carrusel no parece estar implementado? Alguna idea de por qué?

code.js

 import React, { Component } from 'react'; import './news.css'; import Carousel from "react-multi-carousel"; import "react-multi-carousel/lib/styles.css"; const responsive = { superLargeDesktop: { breakpoint: { max: 4000, min: 3000 }, items: 5, }, desktop: { breakpoint: { max: 3000, min: 1024 }, items: 3, }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 2, }, mobile: { breakpoint: { max: 464, min: 0 }, items: 1, }, }; class News extends Component { state = { loading: false, data: [], headline: [] } componentDidMount() { this.setState({ loading: true }) console.log('app mounted'); fetch('https://newsapi.org/v2/top-headlines?country=us{amp}amp;category=business{amp}amp;apiKey=8ee8c21b20d24b37856fc3ab1e22a1e5') .then(data ={amp}gt; data.json()) .then(data ={amp}gt; this.setState({ data: data.articles, loading: false }, () ={amp}gt; console.log(data.articles))) } render() { return ( {amp}lt;div className="about container"{amp}gt; {amp}lt;h1 className="text-left"{amp}gt;{amp}lt;b{amp}gt;Latest News{amp}lt;/b{amp}gt;{amp}lt;/h1{amp}gt; {this.state.loading ? "loading..." : {amp}lt;div{amp}gt; {this.state.data.map((post, indx) ={amp}gt; { return ( {amp}lt;Carousel responsive={responsive}{amp}gt; {amp}lt;div className="card text-left mt-5" key={indx}{amp}gt; {amp}lt;img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"{amp}gt;{amp}lt;/img{amp}gt; {amp}lt;div className="card-body"{amp}gt; {amp}lt;h5 className="card-title"{amp}gt;{post.title}{amp}lt;/h5{amp}gt; {amp}lt;p className="card-text"{amp}gt;{post.description}{amp}lt;/p{amp}gt; {amp}lt;a href={post.url} target="_blank" rel="noopener noreferrer"{amp}gt;Read More{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Carousel{amp}gt; ) })} {amp}lt;/div{amp}gt; } {amp}lt;/div{amp}gt; ) } } export default News; 

El problema es que pones la función de mapa insid de carrusel

  {this.state.data.map((post, indx) ={amp}gt; { return ( **{amp}lt;Carousel responsive={responsive}{amp}gt;** {amp}lt;div className="card text-left mt-5" key={indx}{amp}gt; {amp}lt;img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"{amp}gt;{amp}lt;/img{amp}gt; {amp}lt;div className="card-body"{amp}gt; {amp}lt;h5 className="card-title"{amp}gt;{post.title}{amp}lt;/h5{amp}gt; {amp}lt;p className="card-text"{amp}gt;{post.description}{amp}lt;/p{amp}gt; {amp}lt;a href={post.url} target="_blank" rel="noopener noreferrer"{amp}gt;Read More{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; **{amp}lt;/Carousel{amp}gt;** ) })} 

Además, creo que debería cambiar su archivo CSS. Tus imágenes son demasiado grandes. prueba este:

  {this.state.loading ? "loading..." : {amp}lt;div{amp}gt; {amp}lt;Carousel responsive={responsive}{amp}gt; {this.state.data.map((post, indx) ={amp}gt; { return ( {amp}lt;div className="card text-left mt-5" key={indx}{amp}gt; //{amp}lt;img className="media-img card-img-top" src={post.urlToImage} alt="Alt text"{amp}gt;{amp}lt;/img{amp}gt; {amp}lt;img style={{ height: '100px' }} src={post.urlToImage} alt="Alt text"{amp}gt;{amp}lt;/img{amp}gt; {amp}lt;div className="card-body"{amp}gt; {amp}lt;h5 className="card-title"{amp}gt;{post.title}{amp}lt;/h5{amp}gt; {amp}lt;p className="card-text"{amp}gt;{post.description}{amp}lt;/p{amp}gt; {amp}lt;a href={post.url} target="_blank" rel="noopener noreferrer"{amp}gt;Read More{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ) })} {amp}lt;/Carousel{amp}gt; {amp}lt;/div{amp}gt; } 

muestra de códigos temporales y caja