title: setState from .map inside componentDidMount()
body: <p>I am trying to find a solution to using <code>setState</code> on mapped items inside <code>componentDidMount</code>.</p>
  
  <p>I am using <a href="https://graphql.org/learn/" rel="nofollow noreferrer">GraphQL</a> along with <a href="https://www.gatsbyjs.org/" rel="nofollow noreferrer">Gatsby</a> with many <code>data</code> items returned but require that on specific <code>pathname</code> is <code>===</code> to <code>slug</code> the <code>state</code> is updated in the component to the matching <code>littleHotelierId</code>.</p>
  
  <pre><code>propertyInit = () =&gt; {
    const pathname = location.pathname;
    return (
      &lt;StaticQuery
        query={graphql`
          query {
            allContentfulProperties {
              edges {
                node {
                  id
                  slug
                  information {
                    littleHotelierId
                  }
                }
              }
            }
          }
       `}
        render={data =&gt; {
          data.allContentfulProperties.edges.map(({ node: property }) =&gt; {
            if (pathname === property.slug) {
              !this.isCancelled &amp;&amp;
                this.setState({
                  littleHotelierId: property.information.littleHotelierId
                });
            }
            return null;
          });
        }}
      /&gt;
    );
  };
  </code></pre>
  
  <p>Then I am pulling this into <code>componentDidMount</code> as </p>
  
  <pre><code>componentDidMount() {
    this.propertyInit();
  }
  </code></pre>
  
  <p>not relevant but as reference <code>this.isCancelled = true;</code> is added to <code>componentWillUnmount</code>.</p>
  
  <p>I don't receive any errors but if I <code>console.log(littleHotelierId)</code> I get nothing.</p>
  
  <p>I did at first think that it may be because <code>return</code> is null so tried giving the <code>map</code> a <code>const</code> and returning as</p>
  
  <pre><code>render={data =&gt; {
    data.allContentfulProperties.edges.map(({ node: property }) =&gt; {
      if (pathname === property.slug) {
        const littleHotelier =
          !this.isCancelled &amp;&amp;
          this.setState({
            littleHotelierId: property.information.littleHotelierId
          });
        return littleHotelier;
      }
    });
  }}
  </code></pre>
  
  <p>but this was unsuccessful too.</p>
  
  <p>The Goal is for <code>componentDidMount</code> to map items returned in the GraphQL <code>data</code> as</p>
  
  <pre><code>componentDidMount() {
    if (path1 === '/path-slug1') {
      !this.isCancelled &amp;&amp;
        this.setState({
          littleHotelierId: 'path-id-1'
      });
    }
    if (path2 === '/path-slug2') {
      !this.isCancelled &amp;&amp;
        this.setState({
          littleHotelierId: 'path-id-2'
      });
    }
    ... // other items
  }
  </code></pre>
  
  <p>I think the issue is that GraphQL is fetching data as asynchronous and this request not completed as componentDidMount() is called. If I <code>console.log</code> the <code>data</code> it is not returning anything to the <code>console</code>. How can I fix this?</p>