title: React passing props into custom carousel
body: <p>I am using this.props and then the array choice to fill my attributes etc.. Is there a better way where I can pass props to shorten from this.props? Also does anyone else see anything wrong with this? It is still automatically sliding and not being "controlled".</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Carousel as BSCarousel } from 'react-bootstrap';
  
  class Carousel extends Component {
    getInitialState() {
      return {
        index: 0,
        direction: null,
      };
    }
  
    handleSelect(selectedIndex, e) {
      this.setState({
        index: selectedIndex,
        direction: e.direction,
      });
    }
  
    render() {
      return (
        &lt;BSCarousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}&gt;
          &lt;BSCarousel.Item&gt;
            &lt;img alt={this.props.alt} src={this.props.image} /&gt;
            &lt;BSCarousel.Caption&gt;
              &lt;h3&gt;{this.props.heading}&lt;/h3&gt;
              &lt;p&gt;{this.props.caption}&lt;/p&gt;
            &lt;/BSCarousel.Caption&gt;
          &lt;/BSCarousel.Item&gt;
        &lt;/BSCarousel&gt;
      );
    }
  }
  
  export default Carousel;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Carousel as BSCarousel } from 'react-bootstrap';
  
  class Carousel extends Component {
    constructor(props) {
      super(props);
  
      this.state = { index: 0, direction: null };
  
      this.handleSelect = this.handleSelect.bind(this);
    }
  
    render() {
      const { alt, image, heading, caption } = this.props;
  
      return (
        &lt;BSCarousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}&gt;
          &lt;BSCarousel.Item&gt;
            &lt;img alt={alt} src={image} /&gt;
            &lt;BSCarousel.Caption&gt;
              &lt;h3&gt;{heading}&lt;/h3&gt;
              &lt;p&gt;{caption}&lt;/p&gt;
            &lt;/BSCarousel.Caption&gt;
          &lt;/BSCarousel.Item&gt;
        &lt;/BSCarousel&gt;
      );
    }
  }
  
  export default Carousel;
  </code></pre>