title: How to print JSON data with map in array React component
body: <p>I have an array like this in React data file and I'm using the <code>.map()</code> method to load JSON data in component <code>ProjectItem.js</code>.</p>
  <p>What is the most efficient way to print nested JSON object? I now want to print the title in projects array so I can debug it, show it on browser. I can't see <code>&lt;div className=&quot;title&quot;&gt;&lt;/div&gt;</code> in inspector, what is the right function?</p>
  <p><strong>Data.json</strong></p>
  <pre><code>{
  &quot;projects&quot;: [
      {
          &quot;title&quot;: &quot;Projecttitle1&quot;,
          &quot;category&quot;: &quot;frontend development&quot;,
          &quot;description&quot;: &quot;&quot;,
          &quot;desktop&quot;: [],
          &quot;mobile&quot;: []
      }
    ]
  }
  </code></pre>
  <p><strong>ProjectItem.js</strong></p>
  <pre><code>import React from 'react';
  import './ProjectItem.scss';
  import useWindowWidth from '../../Hooks/useWindowWidth.js';
  import { projects } from '../../data'
  
  import desktopImage from '../../Assets/Images/Projects/Desktop/123.jpg';
  import mobileImage from '../../Assets/Images/Projects/Mobile/123_square.jpg'
  
  
  const ProjectItem = ({ viewProject }) =&gt; {
  
  const imageUrl = useWindowWidth() &gt;= 650 ? desktopImage : mobileImage;
  
  const { windowWidth } = useWindowWidth();
  return(
      &lt;div className=&quot;projectItem&quot; style={{ backgroundImage: `url(${ imageUrl })`}}&gt;
          {windowWidth &gt;= 650 &amp;&amp;( 
              &lt;&gt;
              &lt;div className=&quot;title&quot;&gt;
                  {projects.map((data, key)=&gt;{
                          console.log(key);
                      return(
                          &lt;div key={key}&gt;
                          {data.title}
                          &lt;/div&gt;
                      );
                  })} 
              &lt;/div&gt;
              &lt;div className=&quot;viewProject&quot;&gt;{viewProject}&lt;/div&gt;
              &lt;/&gt;
          )}  
      &lt;/div&gt;
      );
  }; 
  
  export default ProjectItem
  </code></pre>
  <p><strong>Console:</strong></p>
  <p>empty</p>