title: ReactJS error - “Cannot read property 'data' of undefined”
body: <p>I’m building a React form that will have several drop-down boxes populated with data from MongoDB.  I’m relatively new to React and a beginner with MongoDB.</p>
  
  <p>I’m starting with just trying to create a basic page with one drop-down on it.  Once I get that right, I can move on to adding the other drop-downs.</p>
  
  <p>I’ve been able to successfully get the data into the drop-down by just cramming all of the code into one file.  Now, I’m trying to start refactoring the code by properly splitting pieces into separate files.  And that’s where I’m running into problems.  </p>
  
  <p>I’ve split out my MongoDB data pull (using Mongo Stitch) into a separate “service” file.  And I’m still getting data through that new service file.  But when I then try to pull that service-file data into my main (App.js) page, I’m getting a “Cannot read property 'data' of undefined” error.  So, clearly, the way I’m trying to pull the data into my App.js file is wrong.  I’d appreciate any expert insights anyone could offer!</p>
  
  <p>Here’s my App.js file  – </p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.css";
  import { getProjects } from "./services/svcProjects";
  
  class App extends Component {
    state = {
      data: {
        selProject: ""
      },
      Projects: []
    };
  
    async componentDidMount() {
      await this.fetchProjects();
    }
  
    async fetchProjects() {
      const { data: projects } = await getProjects();
      console.log(projects);
      this.setState({ projects });
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Project Log&lt;/h1&gt;
          &lt;label htmlFor={"selProject"}&gt;{"Project"}&lt;/label&gt;
          &lt;select name={"selProject"} id={"selProject"} className="form-control"&gt;
            &lt;option value="" /&gt;
            {this.state.projects.map(a =&gt; (
              &lt;option key={a._id} value={a.project}&gt;
                {a.project}
              &lt;/option&gt;
            ))}
          &lt;/select&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>And here’s the “projects service” file.  Again, please note that the console.log statements here show that I’m still getting data back from MongoDB.  I’m just not pulling the data into my App.js file the right way.</p>
  
  <p>Also, by the way, I realize that having my Mongo connection info in this file is a huge security hole.  I’ll be fixing that later.</p>
  
  <pre><code>import {
    Stitch,
    RemoteMongoClient,
    AnonymousCredential
  } from "mongodb-stitch-browser-sdk";
  
  export function getProjects() {
    const client = Stitch.initializeDefaultAppClient("------");
    const db = client
      .getServiceClient(RemoteMongoClient.factory, "-----")
      .db("----------");
    client.auth
      .loginWithCredential(new AnonymousCredential())
      .then(() =&gt;
        db
          .collection("--------")
          .find({}, { sort: { Project: 1 } })
          .asArray()
      )
      .then(res =&gt; {
        console.log("Found docs", res);
        console.log("[MongoDB Stitch] Connected to Stitch");
        return res;
      })
      .catch(err =&gt; {
        console.error(err);
      });
  }
  </code></pre>