looping over list

import React, { Component } from 'react';

class componentName extends Component {
  constructor(props) {
    super(props);
    this.handleClicks = [];
    this.props.friends.forEach(friend =>  {
      this.handleClick[fiend.id] = this.handleClick.bind(this, friend.id);
    })
  }
  
  this.handleClick(id, event) {
    // ... do your stuff with id
  }

  render() {
    const { friends } = this.props;
    return (
      <div>
        fiends.map(friend => (
          <Button onClick={this.handleClicks[friend.id]} />
        ))
      </div>
    );
  }
}

export default componentName;