title: What is the right construction to print this JSON data in React?
body: <p>I'm new to React language and running into problem involving printing out of a given object/data-structure.</p>
  <p>Data structure (JSON?)</p>
  <pre><code>{ &quot;boards&quot;: [ { &quot;groups&quot;: [ { &quot;title&quot;: &quot;Introduction&quot; }, { &quot;title&quot;: &quot;Page Two&quot; } ] } ] }
  </code></pre>
  <p>I'm at the point that I can print <code>this.state.boardData.boards</code> I found some topics about the <code>map()</code> functionalities but can't seem to get this to work.</p>
  <p>My compentDidMount (involving the monday.api and GraphQL):</p>
  <pre><code>  monday.listen(&quot;context&quot;, res =&gt; {
      this.setState({context: res.data});
      monday.api(`query ($boardIds: [Int]) { boards (ids:$boardIds) { groups { title } } }`, 
        { variables: {boardIds: this.state.context.boardIds} }
      )
      .then(res =&gt; {
        this.setState({boardData: res.data});
      });
      
    })
  </code></pre>
  <p>My map() function:</p>
  <pre><code>const navItems = this.state.boardData.boards.map((title) =&gt;
    &lt;a className=&quot;pageview__nav-item&quot;&gt;{JSON.stringify(title, null, 2)}&lt;/a&gt;
  );
  </code></pre>
  <p>Provided error:</p>
  <pre><code>TypeError: Cannot read property 'map' of undefined
  </code></pre>
  <p>I'm guessing this is because the values are empty when I'm trying to map the values. I tried to initialize the data but without luck:</p>
  <pre><code>constructor(props) {
      super(props);
      
          // Default state
          this.state = {
            settings: {},
            name: &quot;&quot;,
            boardData: {groups: []}
          };
        } 
  </code></pre>
  <p>I also tried to initialize the variable but that seems to complaining about variables already being declared.</p>
  <p>Anyone can point me into the right direction? That would be really helpful.</p>