title: Fetch neo4j data in reactjs
body: <p>I am trying to fetch data from my neo4j database and show them in cards.
  Here is my function to fetch the data:</p>
  <pre><code> constructor(props){
          super(props);
          this.state = {
              data: []
          }
      }
  
  async componentDidMount() {
  
          const neo4j = require('neo4j-driver')
          const driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', 'pass'))
          const session = driver.session({database: 'mydatabase'})
          let result = null
          
          try {
  
              result = await session.run(
                  &quot;MATCH (a:Person { userid: $userID })&lt;-[:`has relation`]-(b:Job)-[:`another relation`]-&gt;(c:Person) RETURN b.name AS name, c.job +' '+ c.additional_job AS job&quot;,
                  {
                      userID: userID
                  }
              )
  
          } catch (error) {
            console.log(`unable to execute query. ${error}`)
          } finally {
              await session.close()
          }
          
           await driver.close()
           this.setState({
               data: result.records
          })
  
           
      }
  </code></pre>
  <p>And this is the render method:</p>
  <pre><code>render(){
  
         
          
          return(
           &lt;section&gt;
                &lt;h1&gt;my jobs&lt;/h1&gt;
                 
               { Object.keys(this.state.data).map((item, index) =&gt; &lt;MyCard key={index} name={item.name} job={item.job}/&gt;) }
           &lt;/section&gt;   
            
          );
      }
  </code></pre>
  <p>But it's showing the following error:</p>
  <pre><code>TypeError: data.map is not a function
  </code></pre>
  <p>Can you tell me what is missing here?</p>
  <p>And, currently I am using an asynchronous <code>function ( async fetchData() )</code> to fetch data. Should I use <code>componentDidMount()</code> function to fetch data from neo4j database?</p>
  <p>I get following in the console:</p>
  <pre><code> Promise {&lt;pending&gt;}
      [[Prototype]]: Promise
      [[PromiseState]]: &quot;fulfilled&quot;
      [[PromiseResult]]: Array(2)
          0: Record
              keys: (2) ['name', 'job']
              length: 2
              _fieldLookup: {name: 0, job: 1}
              _fields: (2) ['name 1', 'first job another job']
              [[Prototype]]: Object
          1: Record
              keys: (2) ['name', 'job']
              length: 2
              _fieldLookup: {name: 0, job: 1}
              _fields: (2) ['name 2', ' second job another job ']
              [[Prototype]]: Object
              length: 2
              [[Prototype]]: Array(0)
  </code></pre>