Reactstrap: Invalid prop type of array supplied to CarouselItem, expected object.

Created on 21 Dec 2017  路  3Comments  路  Source: reactstrap/reactstrap

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.

Most helpful comment

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>
    ))

All 3 comments

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?

Was this page helpful?
0 / 5 - 0 ratings