title: Can't print data from database in react. Getting TypeError: Cannot read properties of undefined (reading 'productname')
body: <pre><code>router.get(&quot;/product&quot;,async(req,res) =&gt; {
          try {
              const data = await Product.find({});
              console.log(data);
              res.send(data);
          } catch (error) {
              console.log(error);
          }
      });
  </code></pre>
  <p>The code above fetches the data from database successfully and also prints in the console.
  Now in frontend</p>
  <pre><code>function Product() {
      useEffect (() =&gt; {
          fetchItems();
      },[]);
  
      const [items, setItems] = useState([]);
  
      const fetchItems = async() =&gt; {
          const data = await fetch('/product',{
              method: &quot;GET&quot;,
              headers: {
                  Accept: &quot;application/json&quot;,
                  &quot;Content-Type&quot;: &quot;application/json&quot;
              },
              credentials: &quot;include&quot;
          });
          const items = await data.json();
          setItems(items);
      };
  
      return (
          &lt;div&gt;
              &lt;h1&gt;Product Page&lt;/h1&gt;
              {
                  items.map(item =&gt; {
                      &lt;p&gt;{item.product.productname} {item.product.producttype} {item.product.productprice}&lt;/p&gt;
                  })
              }
  
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>I can't print any items as I am getting a type error. The name of the collection is products.</p>