Issue description
components: Carousel
reactstrap version #5.0.0-alpha.4
import method es6
react version #16.2.0
bootstrap version #4.0.0-beta.2
What is happening?
I am using react with typescript.
When I try :
Using the sample code provided in the first example from the docs. (http://reactstrap.github.io/components/carousel/)
I get the following error :
Warning: Failed prop type: Invalid prop children of type array supplied to CarouselItem, expected object.
There is an error in the Carousel Item (in code sample)
Try this instead :
const slides = items.map((item) => (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
src={item.src}
altText={item.altText}
>
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>
))
Can be closed. Related to #641 and fixed by #735
I used reactstratp in my app, and the console put this error:
Warning: Failed prop type: Invalid prop children of type array supplied to CarouselItem, expected object.
in CarouselItem (at Page.jsx:92)
in Page (at index.js:9)
` const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
{/* Carousel Content */}
<Container>
<Row>
<Col xs="12" sm="12" md="6" lg="6" xl="6" className="colorFrame">
<center>
<div className="frame2">
<br/>
<h2 className="color-blue"><b>{item.title}</b></h2>
<p>___</p>
<FormText color="muted">
{item.text1}
</FormText>
<br/>
<FormText color="muted">
{item.text2}
</FormText>
</div>
</center>
</Col>
<Col xs="12" sm="12" md="6" lg="6" xl="6">
<img src={item.src} alt={item.altText} className="imgRight"/>
</Col>
</Row>
</Container>
{/* END Carousel Content */}
<CarouselCaption captionText={item.caption} captionHeader={item.caption}/>
</CarouselItem>
);
});`
i used the example on the web page http://reactstrap.github.io/components/carousel/
what have i need to do?
Most helpful comment
There is an error in the Carousel Item (in code sample)
Try this instead :