How to solve binding functions which need a index or value (e.g., buttons in something that is .map()ed.)

component.jsx

const React = require('react');
const ReactDOM = require('react-dom');

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.handleButton = this.handleButton.bind(this);
    }
    handleButton(ev) {
        //name needs to be cast to an int since attributes are all strings.
        this.props.handler(+ev.target.name);
    }
    render() {
        <ul>
            {this.props.list.map((item, index)=>{
                return (
                    <li>
                        <button name={index} onClick={this.handleButton}>{item.label}</button>
                    </li>
                );
            })}
        </ul>
    }
}

module.exports = Component;

const arr = [
    {
        label: 'button 1',
    },
    {
        label: 'button 2',
    },
    //...
];

const doImportantThingBasedOnClickedButton = function(buttonIndex) {
    //stuff
}

ReactDOM.render(
    <Component list={arr} handler={doImportantThingBasedOnClickedButton} />,
    renderTarget
);