extra blank slide when using array

I seem to be getting a blank slide at the end when using a dynamic array to generate my slides.

import React, {PropTypes} from 'react'
import OwlCarousel from 'react-owl-carousel'

class Carousel extends React.Component {

    constructor(props) {
        super(props);

        this.options = {
            autoplay: true,
            loop: true,
            nav:true,
        }

    }


    render() {
        return (<OwlCarousel className="owl-theme" {...this.options}>
            {this.props.slideItems.map((item, idx) => {
                        let image = <img src={item.src} alt={item.alt ? item.alt : `Carousel Image #${idx}`} className={'image' + idx}/>
                        return (
                            <a key={idx} href={item.href} style={slideStyle} data-event={item.dataEvent} data-value={item.dataValue}>
                                {image}
                            </a>
                        )
                    })}
        </OwlCarousel>)
    }

}

export default Carousel

I have verified that my array only returns 4 results, but the carousel is generating 5 items with a blank one at the end.

[GaneshMitra]

I am having the same issue, I was resolved it by checking array length code as follows: ```

let ImageList = $.map(this.state.data, function (data, index) {
            if (parseInt(this.state.selectedcaseitem) === parseInt(index)) {
                return (
                    $.map(data.screenshots, function (d, i) {
                        return (
                            <span className="item" key={i}>
                                <img src={d.screenshot} alt="" />
                            </span>
                        );
                    }.bind(this))

                );
            }
        }.bind(this));

And the length checking should be 
                                  <span className="large-12 columns">
                                    {ImageList.length>0?
                                    <OwlCarousel {...options} className="owl-theme" >
                                        {ImageList}
                                    </OwlCarousel>:""}
                                </span>

[floyd0987]

Checking the array length works.

{this.state.posts.length>0?
        <OwlCarousel ref="car" options={options} events={events}>

          {this.state.posts.map( (post) => 

               <div>
               <a href={ post.link }>
               <img src={ post.image } alt={ post.name } className="post-image" />
               <p>{ post.name }</p>
               </a>
               </div>

         )
       }

          </OwlCarousel>
          :""}