React performance problem: Creating a new function on every render, when you need parameters.

component.jsx

var React = require('react');

//This would be passed props like:
{
    btns: [
        {id: 'btn1', label: 'Button 1'},
        {id: 'btn2', label: 'Button 2'},
        {id: 'btn3', label: 'Button 3'},
    ],
    onBtnClick: function(btnId) {
        //Does something and is probably bound to the parent.
    }
}

let BtnList = React.createClass({
    render: function() {
        return (
            <ul>
                {this.props.btns.map((aBtn) => {
                    return (
                        <li key={aBtn.id} }>
                            {/* The problem is here. This onClick handler will get recreated on every render. */}
                            <button type="button" onClick={() => this.props.onBtnClick(aBtn.id)} >{aBtn.label}</button>
                        </li>
                    );
                })}
            </ul>
        );
    },
});

module.exports = BtnList;