title: How to update state of array element during listener in React?
body: <p>I'm working on a web app that reads sensor data to gauge objects via socket.io.</p>
  <p>The function addNewGauge() adds an element to the component's array of gauges, but I also want to install a socket.io listener for <em>that</em> element.</p>
  <p>The addNewGauge() function works, and the listener is picking up the event, which I know because the error below occurs for every socket event:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'value' of undefined
  occurs for each socket event I send.</p>
  </blockquote>
  <p>I'm assuming this is because it can't read the array index during the listener? How do I update the state of that specific element in the state every time?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import socketIOClient from "socket.io-client"
  
  class WidgetContainer extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        //Initial array of gauges
        gauges: [{
          index: 0,
          sensorType: 'temperature',
          units: "Fahrenheit"
        }],
        //Endpoint for socket data
        endpoint: 'http://127.0.0.1:4200'
      }
      this.addNewGauge = this.addNewGauge.bind(this)
    }
  
    componentDidMount() {
      const {endpoint} = this.state;
      //Fire up the socket when container is mounted
      this.widget_socket = socketIOClient(endpoint)
    }
  
    addNewGauge() {
      this.setState(state =&gt; {
        // ensure next gauge has a unique index
        const nextIndex = state.gauges.length;
        const gaugeList = state.gauges.concat({
          index: nextIndex,
          sensorType: 'temperature',
          units: "Fahrenheit"
        });
        // Set up a listener for that gauge's sensor type
        //BROKEN
       this.widget_socket.on(gaugeList[nextIndex].sensorType, (data) =&gt; {
          //Update state with new sensor value
          let newState = update(this.state.gauges, {
            nextIndex: {
              value: {
                $set: data
              }
            }
          })
          this.setState(newState);
        })
  
        return {
          gauges: gaugeList
        };
      });
    }
  
    render() {
      let gaugeList = this.state.gauges.map((gauge) =&gt;
        &lt;Gauge 
        key = {gauge.index}
        // Specify gauge properties from our saved state
        value = {gauge.value}
        units = {gauge.units}
        /&gt;
      );
  
      return ( 
              &lt;div&gt;
                 {gaugeList}
                 &lt;Button key="addButton" 
                  onClick={this.addNewGauge}
                 &gt;Add gauge&lt;/Button&gt;
              &lt;/div&gt;
      );
    }
  }
  
  export default WidgetContainer</code></pre>
  </div>
  </div>
  </p>