title: Pass multiple parameters to event handlers in React
body: <p>So im trying to make react work with ES6 syntax. In ES5 I had setInitialState without a constructor which worked with the function binding syntax. I have a list of prices which is arbitrary and I want the state to change when the input element is changed. But the right price has to be changed.</p>
  
  <p>I'm not even quite sure this is the right way to do it. Can someone please tell me the most recent way this should be done?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import React, {Component} from 'react'
  import 'bootstrap/dist/css/bootstrap.css';
  
  export default class PriceTable extends Component {
    constructor(props, context) {
      super(props, context);
  
      this.state = {
        pid: this.props.pid || "12345",
        name: this.props.name || "name",
        prices: this.props.prices || [
          {count: 1, desc: 'one', price: 8.25},
          {count: 6, desc: 'six', price: 7.60},
          {count: 12, desc: 'twelve', price: 6.953}
        ]
      };
  
      this.setPid = this.setPid.bind(this);
      this.setName = this.setName.bind(this);
      this.setCount = this.setCount.bind(this, i);
      this.setDesc = this.setDesc.bind(this, i);
      this.setPrice = this.setPrice.bind(this, i);
      this.logDebug = this.logDebug.bind(this);
    }
  
    setPid(e) {
      this.setState({pid: e.target.value})
    }
  
    setName(e) {
      this.setState({name: e.target.value})
    }
  
    setCount(i, e) {
      var newPrices = this.state.prices
      newPrices[i].count = e.target.value
      this.setState({prices: newPrices})
    }
  
    setDesc(i, e) {
      var newPrices = this.state.prices
      newPrices[i].sec = e.target.value
      this.setState({prices: newPrices})
    }
  
    setPrice(i, e) {
      var newPrices = this.state.prices
      newPrices[i].price = e.target.value
      this.setState({prices: newPrices})
    }
  
    _renderPriceRow(price, i) {
      return (
        &lt;tr key={i}&gt;
          &lt;td &gt;
            &lt;input type="text" className="form-control" defaultValue={price.count} onChange={this.setCount(this, i).bind(this, i)}/&gt;
          &lt;/td&gt;
          &lt;td &gt;
            &lt;input type="text" className="form-control" defaultValue={price.desc} onChange={this.setDesc(this, i).bind(this, i)}/&gt;
          &lt;/td&gt;
          &lt;td &gt;
            &lt;input type="text" className="form-control" defaultValue={price.price} onChange={this.setPrice(this, i).bind(this, i)}/&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
      );
    }
  
    render() {
      return (
        &lt;div className="row"&gt;
         ...
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>And this is the error...</p>
  
  <pre><code>PriceTable.jsx:21 Uncaught ReferenceError: i is not defined
      at new PriceTable (PriceTable.jsx:21)
  </code></pre>