title: How to retrieve a fetch data from a JSON?
body: <p>In a React component</p>
  <pre><code>import React from 'react';
  export default function Customers (props) {
     const [customers, setCustomers] = React.useState([]);
     React.useEffect(() =&gt; { 
        fetch(&quot;/data.json&quot;).then(response =&gt; response.json())
        .then(data =&gt; {
           setCustomers([data])
        })
     }, []);
  
     return (
        &lt;div id='Customers'&gt;
           {customers.map(c =&gt; c.name)}
        &lt;/div&gt;
     )
  </code></pre>
  <p>How can I display just the names of the customers from a file in the public directory called data.json ?</p>
  <pre><code>{
      &quot;customers&quot;: [
          {
              &quot;id&quot;: 542,
              &quot;name&quot;: &quot;E&quot;
          },
          {
              &quot;id&quot;: 354,
              &quot;name&quot;: &quot;V&quot;
          },
          {
              &quot;id&quot;: 54534
              &quot;name&quot;: &quot;A&quot;
          }        ,
          {
              &quot;id&quot;: 33,
              &quot;name&quot;: &quot;K&quot;
          }
      ],
      &quot;packages&quot;: [
          {
              &quot;id&quot;: 3643453453453,
              &quot;weight&quot;: 6343
          },
          {
              &quot;id&quot;: 453453,
              &quot;weight&quot;: 4534534534
          }
      ]
  }
  </code></pre>
  <p>I tried using customers[&quot;customers&quot;] or customers.customers but nothing worked...</p>
  <p>Thanks.</p>