title: How can I display React component based on prop name passed into a container?
body: <p>UPDATE Solved poorly with</p>
  
  <pre><code>const curSlide = this.props.name;
  
          const setView = () =&gt; {
              if(curSlide === 'Slide1') {
                  return &lt;Slide1 /&gt;
              } else if(curSlide === 'Slide2') {
                  return &lt;Slide2 /&gt;
              } else {
                  return &lt;Slide3 /&gt;
              }
          }
  
          return(
              &lt;div&gt;
                  &lt;center&gt;
                      {setView()}
                  &lt;/center&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I have a story that contains a slide container which hosts different components.   I have a button under my story container that when pressed passes this.props.name + 1 to the slide container.  I would like the slide container to be able to use this information and render out the proper Slide based on the button click. </p>
  
  <p>I am not sure why nothing is showing up when the button is clicked.</p>
  
  <p>Story.js</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import sass from '../scss/application.scss'
  import SlideContainer from './SlideContainer'
  
  
  class Story extends Component {
      constructor(props){
          super(props)
              this.state = {
                  name: '',
                  count: 0
              }
      }   
  
      handleClick(e) {
          e.preventDefault();
          let tempCount = this.state.count + 1;
          let curSlide = `Slide${tempCount}`;
  
          this.setState({
              name: curSlide,
              count: tempCount
          });
  
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;SlideContainer name={this.state.name}/&gt;
                  &lt;/div&gt;
                  &lt;center&gt;&lt;button className="btn btn-danger" onClick={this.handleClick.bind(this)}&gt;
                          &lt;span className="glyphicon glyphicon-heart"&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;/center&gt;
              &lt;/div&gt;
          )
      }
  }
  
  
  Story.propTypes = {
      name: PropTypes.string,
      count: PropTypes.number
  }
  
  export default Story;
  </code></pre>
  
  <p>SlideContainer.js</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import sass from '../scss/application.scss'
  import Slide1 from './Slide1'
  import Slide2 from './Slide2'
  
  
  class SlideContainer extends Component {
      constructor(props){
          super(props)
              this.state = {
                  name: ''
              }
      }   
  
      render() {
  
          let curSlide = this.props.name;
  
          return(
              &lt;div&gt;
                  &lt;center&gt;
                      &lt;curSlide /&gt;
                  &lt;/center&gt;
              &lt;/div&gt;
          )
      }
  }
  
  SlideContainer.propTypes = {
      name: PropTypes.string
  }
  
  export default SlideContainer;
  </code></pre>