title: React / Javascript can't find the elements in array.map
body: <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, { Component } from "react";
  
  class LogIssueScreen extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    componentDidMount() {
      fetch(`${apiRoot}log_issue`, {
        method: "GET",
      })
        .then(response =&gt; response.json())
        .then(data =&gt; {
          this.setState({
            fields: data.fields
          });
        });
    }
  
    render() {
      return (
        &lt;div className="container-fluid"&gt;
          {this.state.fields ? (
            &lt;div className="row"&gt;
              &lt;div className="col col-md-6 my-3 mx-auto"&gt;
                this.state.fields.filter(x =&gt; (x.choices != null)).map((item,
                index) =&gt; (
                &lt;div className="row align-items-center"&gt;
                  &lt;div className="col-3"&gt;{item.name}&lt;/div&gt;
                  &lt;div className="col my-3 mx-auto"&gt;
                    &lt;Dropdown
                      value={item.name}
                      choices={item.choices}
                      id={item.name}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                ))
              &lt;/div&gt;
            &lt;/div&gt;
          ) : (
            "LOADING"
          )}
  
          &lt;div className="row"&gt;
            &lt;div className="col-2 my-3 mx-auto"&gt;
              &lt;input
                type="button"
                value="Log Issue"
                className="btn btn-block btn-primary"
                onClick={this.onSubmit}
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using the following code:</p>
  
  <pre><code>{
    this.state.fields
      ? this.state.fields
          .filter(x =&gt; x.choices != null)
          .map((item, index) =&gt; (
            &lt;Dropdown
              value={item.name}
              choices={item.choices}
              id={item.name}
              onSelect={this.handleDropdownSelect}
            /&gt;
          ))
      : "LOADING";
  }
  </code></pre>
  
  <p>The result of which, is three copies of <code>'item' is not defined  no-undef</code>.</p>
  
  <p>The goal is to take the 'fields' array (of objects) in the state, filter it such that only those elements whose 'choices' key is not null remain, and then map the resulting array to a series of dropdowns. I've tried replacing {item.foo} with a string, to confirm that there was nothing wrong with the <code>Dropdown</code> component, and indeed, it works correctly. For some reason, map can't find 'item'. I've also tried dropping the keys (i.e. just item, instead of item.foo), to check if that gave a different error, but it didn't.</p>