How to update state of array element during listener in React?

I’m working on a web app that reads sensor data to gauge objects via

The function addNewGauge() adds an element to the component’s array of gauges, but I also want to install a listener for that element.

The addNewGauge() function works, and the listener is picking up the event, which I know because the error below occurs for every socket event:

TypeError: Cannot read property ‘value’ of undefined
occurs for each socket event I send.

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?

import React from 'react'
import socketIOClient from ""

class WidgetContainer extends React.Component {
  constructor(props) {
    this.state = {
      //Initial array of gauges
      gauges: [{
        index: 0,
        sensorType: 'temperature',
        units: "Fahrenheit"
      //Endpoint for socket data
      endpoint: ''
    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 => {
      // 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
     this.widget_socket.on(gaugeList[nextIndex].sensorType, (data) => {
        //Update state with new sensor value
        let newState = update(this.state.gauges, {
          nextIndex: {
            value: {
              $set: data

      return {
        gauges: gaugeList

  render() {
    let gaugeList = =>
      key = {gauge.index}
      // Specify gauge properties from our saved state
      value = {gauge.value}
      units = {gauge.units}

    return ( 
               <Button key="addButton" 
               >Add gauge</Button>

export default WidgetContainer

72 thoughts on “How to update state of array element during listener in React?”

Leave a Comment