current number of slide using bootstrap carousel in reactJS

Question

I am creating a bootstrap carousel(image-gallery) in reactJS but I am facing problem in showing exact index number(it's showing last index value of current slide.

For example: If I am on 4th slide coming from 1st-2nd-3rd slide then my slide number will be 3(i.e. index 2) and I will click on previous button then my current slide number will be 3rd but myIndex value will be 4(instead of 3) or index of image will be 3 instead of 2) of active slide.

var PhotoAlbum= React.createClass({
getInitialState: function(){
        return({
            myIndex : 1
        })
    },


    componentWillReceiveProps: function() {
        var currentIndex = $('div.active').index() + 1;
        console.log(currentIndex)

    this.setState({ myIndex:  currentIndex })
},


   render: function(){

console.log(this.state.myIndex, "index number");
    return(
        <div>

        <div className="modal-body pd_0">
       <h4 className="text-center"><b>{this.state.myIndex}/{Photos.length}</b></h4>
        <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">

<div className="carousel-inner" role="listbox" >
    {
        Photos.map(function(x,i){
             if(i==0){
                return(
                 <div className="item active">
                 <img src={x} className="img-responsive"/>
                 </div>
                )

            }else{
                return(
                 <div className="item">
                 <img src={x} className="img-responsive"/>
                 </div>
                )

            }
        })
    }
    </div>

  <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span className="sr-only">Previous</span>
  </a>
  <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span className="sr-only">Next</span>
  </a>
</div>
      </div>


        </div>
        )
   }
})

In given sample I tried same thing in componentDidMount but this.setState is not a function there. Please help me here to get correct slide number and update it on my browser. Thanks

Answer 1

For given code I created your modal as you want. Please go through given sample:

var PhotoAlbumModal= React.createClass({
   getInitialState: function(){
        return ({
          myPhotoAlbum: this.props.photoAlbum,
          myIndex: 1
        })
    },
     componentWillReceiveProps: function(newProps) {
    this.setState({ myPhotoAlbum:  newProps.photoAlbum })
    },

    componentDidMount: function() {
        this.albumController();
    },

    albumController: function(){
              $('.carousel').carousel({ })
              .on('slid.bs.carousel', function () {

                  var curSlide = $('div.item.active');
                   myIndexValue= curSlide.index()+1;
                   this.setState({ myIndex: myIndexValue })
              }.bind(this));

    },

    render: function(){

            var itemClass;
            var myAlbum = Object.keys(this.state.myPhotoAlbum).map(function(x,i){
                var image=x

                if(i == 0){
                  itemClass="item active";
                  }
                  else{
                       itemClass="item";
                    }
                return(
                    <div className={itemClass} key={i}>
                        <img src={image} className="img-responsive"/>
                    </div>
                )

          },this)


    return(
        <div>
          <div className="modal-body pd_0">
              <h4 className="text-center photo_album_count">{this.state.myIndex}/
              {this.state.myPhotoAlbum.length}</h4>

                  <div id="carousel-example-generic" className="carousel slide" data-interval="false">
                      <div className="carousel-inner center-album" role="listbox">
                          {myAlbum}
                      </div>

                       {this.state.myPhotoAlbum.length>1 ?
                      <div>
                          <a className="left carousel-control control-album" href="#carousel-example-generic" 
                        role="button" data-slide="prev" >
                            <div className="arrow-control">
                              <span className="album-prev" aria-hidden="true"></span>
                              <span className="sr-only">Previous</span>
                            </div>
                          </a>


                          <a className="right carousel-control control-album" href="#carousel-example-generic" 
                              role="button" data-slide="next" >
                              <div className="arrow-control">
                                <span className="album-next" aria-hidden="true"></span>
                                <span className="sr-only">Next</span>
                              </div>
                          </a>
                      </div>
                      :null}


                  </div>

          </div>
      </div>
        )
   }
});

**Benefit of given code: ** If total images will be 1 then there will be no right-left control else there will be.

albumcontroller function is working on didmount.