Change active element in a list using react

  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
  }

  handleClick(index, props) {
    // do something with props
    // ...    

    // now update activeIndex
    this.setState({ activeIndex: index });
  }

  render() {
    return (
      <div>
        {
          this.props.people.map(function(person, index) {
            const className = this.state.activeIndex === index ? 'media active' : 'media';  
            return (
              <div className={className} key={index} onClick={handleClick.bind(this, index, this.props)}>
                <item className="media-body">{person.name}</item>
              </div>
            );
          }, this)
        }
      </div>
    );
  }