title: Simple Carousel Component in React
body: <p>API that I am trying to design:</p>
  
  <pre><code>&lt;Carousel&gt;
    &lt;CarouselItem&gt;&lt;any arbitrary HTML here&gt;&lt;/CarouselItem&gt;
    &lt;CarouselItem&gt;&lt;any arbitrary HTML here&gt;&lt;/CarouselItem&gt;
    &lt;CarouselItem&gt;&lt;any arbitrary HTML here&gt;&lt;/CarouselItem&gt;
  &lt;/Carousel&gt;
  </code></pre>
  
  <hr>
  
  <p>Each <code>&lt;CarouselItem/&gt;</code> is supposed to have a <code>next</code> button, So, my <code>&lt;CarouselItem/&gt;</code> render function looks like this:</p>
  
  <pre><code>&lt;div className="carousel-item"&gt;
    {this.props.children}
    &lt;div onClick={this.nextSlide}&gt;
      Next
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <code>&lt;Carousel/&gt;</code> component's job is to render only 1 <code>CarouselItem</code> at a time and jump to the next one when a click happens.</p>
  
  <p>I am able to render a single <code>CarouselItem</code> but I am having trouble wiring up a click handler to the <code>CarouselItem</code> inside <code>Carousel</code></p>
  
  <pre><code>import React, { Component } from 'react'
  import CarouselItem from './carousel-item'
  
  class Carousel extends Component {
    constructor(props, context) {
      super(props, context)
  
      this.state = {
        currentIndex: -1,
        currentItem: null
      }
  
      this.activateSlideAtIndex = this.activateSlideAtIndex.bind(this)
    }
  
    findItemAtIndex(index) {
      return this.props.children.find((carouselItemComponent)=&gt; carouselItemComponent.props.item.index === index)
    }
  
    componentWillMount() {
      this.activateSlideAtIndex(this.state.currentIndex)
    }
  
    activateSlideAtIndex(index) {
      let newCarouselItemComponent = this.findItemAtIndex(index+1)
      if (newCarouselItemComponent) {
        newCarouselItemComponent.props.onClick = this.activateSlideAtIndex
       //Complains here that Cannot assign to read only property 'onClick' of object '#&lt;Object&gt;'
        this.setState({
          currentIndex: index+1,
          currentItem: newCarouselItemComponent
        })
      }
    }
  
    render() {
      return (
        &lt;div className="carousel"&gt;
          {this.state.currentItem}
        &lt;/div&gt;
      )
    }
  }
  
  export default Carousel
  </code></pre>
  
  <p>I understand that I cannot override the <code>props</code> of a child component. How am I supposed to achieve what I want then? All help is appreciated.</p>