title: Reactjs having problems printing out fetched data
body: <p>super noob question. However, I've been stuck with this issue for long enough now. I've been searching and have found the similar issue but have not been able to resolve it. I was hoping someone could point me in the right direction as to what I am doing wrong. </p>
  
  <p>I am fetching data from an API, and I am able to log out the array, however, when I try to print it out I am having no luck. In the beginning, I was passing it through a reducer but then realized that was not ideal. Right now I am trying to get it to work, then I'll refactor the code into a functional component.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>fetchOrders = async () =&gt; {
          await axios.get('http://localhost:4200/ordenes').then( res =&gt; {
              this.setState({
                  prescription: res.data
              })
          })
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    render() {
          console.log(this.state.prescription)
          return (
              &lt;div &gt;
                  &lt;Paper style={styles.orderCard}id='orderCardContainer' &gt;
                      &lt;div id="profileCardContainer" style={styles.profileCard}&gt;
                          &lt;aside className='profileCardContainer'&gt;
                              &lt;ProfileCard /&gt;
                          &lt;/aside&gt;
                      &lt;/div&gt;
                          {this.renderOrder()}
                  &lt;/Paper&gt;
              &lt;/div&gt;
          )
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The array I receive back from the API looks something like this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Array(18)
  0: {order: Array(3), _id: "5b2af38fb315eb5630a0bc78", physicianName: "Alejandro", patientName: "Alex", createdAt: "2018-06-21T00:38:39.376Z", …}</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class OrderCard extends Component {
      constructor(props) {
          super(props)
          this.state = { prescription: []}
      }
  
      fetchOrders = async () =&gt; {
          const res = await axios.get('http://localhost:4200/ordenes')
          this.setState({
              prescription: res.data
          })
      }
  
      componentDidMount() {
          this.fetchOrders()
      }
  
      renderOrder() {
          if (this.state.prescription.length === 0 ) {
              return ( 
                  &lt;h1&gt;Loading...&lt;/h1&gt;
              )
          } else {
              return (
                  this.state.prescription.map( (x, i) =&gt; {
                      &lt;li&gt;
                          {console.log(x.patientName)}
                          &lt;h1&gt;{ x.patientName }&lt;/h1&gt;
                      &lt;/li&gt;
              })
          )}
      }
  
      render() {
          console.log(this.state.prescription)
          return (
              &lt;div &gt;
                  &lt;Paper style={styles.orderCard}id='orderCardContainer' &gt;
                      &lt;div id="profileCardContainer" style={styles.profileCard}&gt;
                          &lt;aside className='profileCardContainer'&gt;
                              &lt;ProfileCard /&gt;
                          &lt;/aside&gt;
                      &lt;/div&gt;
                      &lt;div id='orders' &gt;
                          { this.renderOrder() }
                      &lt;/div&gt;
                  &lt;/Paper&gt;
              &lt;/div&gt;
          )
      }
  }
  
  function mapStateToProps(state) {
      return {
          auth: state.auth.authenticated,
      }
  }
  
  export default connect(mapStateToProps, actions)(OrderCard)</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>BACKEND SCHEMA</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const orderObj = new Schema({
      name: String,
      price: Number,
   }, { _id : false })
  
  const orderSchema = new Schema (
      {
          physicianName: String,
          patientName: String,
          order: {type: [orderObj]}
      }, 
      { 
          timestamps: true
      }
  )</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>POSTMAN API RESULTS</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>[
      {
          "order": [
              {
                  "name": "Asteraceae",
                  "price": 41.24
              },
              {
                  "name": "Liliaceae",
                  "price": 39.24
              },
              {
                  "name": "Fabaceae",
                  "price": 34.91
              }
          ],
          "_id": "5b2af38fb315eb5630a0bc78",
          "physicianName": "Alejandro",
          "patientName": "Alex",
          "createdAt": "2018-06-21T00:38:39.376Z",
          "updatedAt": "2018-06-21T00:38:39.376Z",
          "__v": 0
      }
  ]</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance for tips. </p>