Cannot map data results from Query in React Page

Shopify Apps
1

I am very new to creating apps. I have been able to create a simple app but can’t get it to map through the results. The query works in the Shopify Graphiql App. In the component, it is retrieving the data, and I can see it in the console. But when I try to loop through the results to display on the the page, I get undefined message. I can’t get the syntax proper.

Here is the query:

const GET_PRODUCTS = gql`
  query {
    products(first: 10){
      edges{
        node {
          id
          title
          tags
        }
      }
    }
  }
`;

Here is data returned:

Here is data returned: 

{
    "products": {
        "edges": [
            {
                "node": {
                    "id": "gid://shopify/Product/6686521983181",
                    "title": "falling darkness",
                    "tags": [
                        "evelyn-hedley",
                        "market-bag"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522015949",
                    "title": "hidden bush",
                    "tags": [
                        "christina-nilsson"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522048717",
                    "title": "lively dew",
                    "tags": [
                        "sarah-murphy"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522081485",
                    "title": "misty flower",
                    "tags": [
                        "beanie",
                        "evie-hedley"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6686522114253",
                    "title": "small star",
                    "tags": [
                        "evelyn-hedley",
                        "tote-bag"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            },
            {
                "node": {
                    "id": "gid://shopify/Product/6687723749581",
                    "title": "Awesome Product",
                    "tags": [
                        "dress",
                        "rebecca-buist"
                    ],
                    "__typename": "Product"
                },
                "__typename": "ProductEdge"
            }
        ],
        "__typename": "ProductConnection"
    }
}

Here is the the component where I need to understand the proper syntax:

import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import {
  Card,
} from '@shopify/polaris';

// GraphQL query that retrieves products
const GET_PRODUCTS = gql`
  query {
    products(first: 10){
      edges{
        node {
          id
          title
          tags
        }
      }
    }
  }
`;

class ResourceListWithProducts extends React.Component {

  render() {
    const app = this.context;
    return (
      
    );
  }
}

export default ResourceListWithProducts;