javascript - current number of slide using bootstrap carousel in reactJS -

i creating bootstrap carousel(image-gallery) in reactjs facing problem in showing exact index number(it's showing last index value of current slide.

for example: if on 4th slide coming 1st-2nd-3rd slide slide number 3(i.e. index 2) , click on previous button current slide number 3rd myindex value 4(instead of 3) or index of image 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 tried same thing in componentdidmount this.setstate not function there. please me here correct slide number , update on browser. thanks

for given code created modal 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 1 there no right-left control else there be.

albumcontroller function working on didmount.