title: React ComponentDidUpdate 'this' is undefined
body: <p>I am trying to update a columns visibility after a component updates based on whether or not the field name exists within array. I am getting a <code>'this' is undefined</code> error as it relates to <code>this.updateColumnShow(field);</code> in the <code>componentDidUpdate</code> function, but I'm not sure why. The function is written using es6 so there's no need to bind it in the constructor. I'm calling a separate function (<code>this.setColumns</code>) in <code>componentDidUpdate</code> and that works fine. Whats different about this one?</p>
  
  <pre><code>class QueryOptionsTable extends React.Component {
  
      constructor(props) {
          super(props);
  
          /*state values within the arrays are dynamic*/
          this.state = {
              columns: [],
              columnList: [],
              removedColumns: [],
              qryFieldSearch: ""
          }
  
          this.textInput = React.createRef();
      }
  
      componentDidMount() {
          this.props.actions.getQueryPreview(this.props.query);
          this.props.actions.getQueryRecordCount(this.props.query);
      }
  
      componentDidUpdate(prevProps, prevState) {
          //debugger;
          let fieldArray = JSON.parse(sessionStorage.getItem("qryFieldArray")); //returns fine
          if (prevProps.queryPreviewResults !== this.props.queryPreviewResults &amp;&amp; this.props.queryPreviewResults.length &gt; 0) {
              this.setColumns();
          }
  
          if (fieldArray.length &gt; 0 &amp;&amp; prevState.columnList !== this.state.columnList &amp;&amp; this.state.columnList.length &gt; 0) {
              /*Loop through the array list and use this value to mark column as show
              else remove column*/
              let columnsToHide = this.state.columnList.filter(x =&gt; !fieldArray.includes(x)); //getting correct results
              columnsToHide.forEach(function (field) {
                  console.log("FIELD TO HIDE: ", field) //this logs correctly
                  this.updateColumnShow(field); //this is undefined
              })
          }
      }
  
      setColumns = () =&gt; {
          Object.keys(this.props.queryPreviewResults[0]).map(key =&gt; {
              this.setState({ [key]: true });//monitor 'checked' property of checkbox?
              this.setState(prevState =&gt; ({
                  columns: [...prevState.columns,
                  {
                      Header: key,
                      accessor: key,
                      show: true,
                      width: 175
                  }],
                  columnList: [...prevState.columnList, key]
              }))
  
              return this.state;
          }
          )
      }
  
      focus = () =&gt; {
          // Explicitly focus the text input using the raw DOM API
          // Note: we're accessing "current" to get the DOM node
          this.textInput.current.focus();
      }
  
      /** show/hide columns. colums are all shown on first render. 
      * Checking them removed them from view
      */
      updateColumnShow = fieldName =&gt; {
          this.focus();
          this.setState({ [fieldName]: !this.state[fieldName] });
          this.setState(state =&gt; {
              const columns = state.columns.map(column =&gt; {
                  if (column.Header === fieldName) {
                      column.show = !column.show;
                      if (!column.show === false) {
                          //add to list of columns to be removed
                          this.removeColumns(fieldName);
                      } else {
                          //remove from list of columns to be removed
                          this.addColumns(fieldName);
                      }
                      return column
                  } else {
                      return column;
                  }
              });
              return { columns }
          })
      }
  </code></pre>
  
  <p>RELEVANT JSX: </p>
  
  <pre><code> &lt;Col xs={3}&gt;
                          &lt;h6&gt;Choose Columns:&lt;/h6&gt;
                          &lt;input
                              type="text"
                              value={this.state.qryFieldSearch}
                              onChange={this.updateQryFieldSearch}
                              placeholder="Search Field Names..."
                              className="form-control"
                              aria-describedby="searchbox"
                          ref={this.textInput}
                          /&gt;
                          &lt;br /&gt;
                          &lt;ul className="query-columns-selector"&gt;
                              &lt;li&gt;
                                  &lt;label&gt;
                                      &lt;input
                                          type="checkbox"
                                          name="removeAll"
                                          onChange={() =&gt; this.hideAllColumns()}
                                          className="form-check-input"
                                      /&gt;
                                      Remove All Columns&lt;/label&gt;
                              &lt;/li&gt;
                              {qryFieldFilteredList.map(listItem =&gt; (
                                  &lt;li key={listItem}&gt;
                                      &lt;label&gt;
                                          &lt;input
                                              id={listItem}
                                              checked={this.state[listItem]}
                                              className="form-check-input"
                                              type="checkbox"
                                              name={listItem}
                                              onChange={() =&gt; this.updateColumnShow(listItem)}
                                          /&gt;
                                          {listItem}&lt;/label&gt;
                                  &lt;/li&gt;
                              )
                              )}
                          &lt;/ul&gt;
                      &lt;/Col&gt;
  </code></pre>