title: React JS: TypeError: Cannot convert undefined or null to object
body: <p>I have a <code>Beach</code> component here that is throwing me the error:</p>
  <pre><code>TypeError: Cannot convert undefined or null to object
  ResortDetail
  C:/Users/JS/Desktop/MERN/KR/frontend/src/screens/Beach.js:33
    30 |           &lt;p&gt;{description}&lt;/p&gt;
    31 |           &lt;br/&gt;
    32 |           &lt;h4&gt;Amenities:&lt;/h4&gt;
  &gt; 33 | &lt;div&gt;
       | ^  34 | { 
    35 |                 Object.entries(amenities).map(
    36 |                   ([key, value]) =&gt; {
  View compiled
  ▶ 17 stack frames were collapsed.
  </code></pre>
  <p>Basically the data looks something like this:</p>
  <pre><code>{_id: &quot;2&quot;, name: &quot;Bluewater Maribago Beach Resort&quot;, price_per_night: 4156,…}
  address: &quot;Buyong&quot;
  amenities: {tv: true, reservation: true}
  city: &quot;New York&quot;
  description: &quot;Set in a complex of thatch-roofed buildings on the Cebu Strait, this posh beachfront resort is 1 km from Mactan Island Aquarium and 4 km from the Magellan Shrine.&quot;
  email: &quot;info@example.com&quot;
  image: &quot;https://images.unsplash.com/photo-1507525428034-b723cf961d3e&quot;
  latitude: 10.290899
  longitude: 124.000822
  name: &quot;Bluewater Maribago Beach Resort&quot;
  phone: &quot;(032) 402 4100&quot;
  price_per_night: 4156
  province: &quot;California Road&quot;
  rating: 3.5
  reviews: 35
  website: &quot;http://www.bluewater.us/&quot;
  zip_code: &quot;6015&quot;
  _id: &quot;2&quot;
  </code></pre>
  <p>I think its complaining about the <code>Object.entries(amenities).map(</code> but not sure why and how can I fix it.</p>
  <p>Here's the complete code:</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import axios from 'axios'
  
  const Beach = ({ match }) =&gt; {
       
       const [resort, setResort] = useState({})
  
       useEffect(() =&gt; {
          const fetchBeach = async () =&gt; {
              const { data } = await axios.get(`/api/resorts/${match.params.id}`)
              setResort(data)
          }
   
          fetchBeach()
       }, [match])
      
      const { name, address, city, province, zip_code, image, description, amenities, website, phone, email } = resort
  
      return (
          &lt;div className=&quot;row mt-5&quot;&gt;
              &lt;div className=&quot;col-lg-7&quot;&gt;
              &lt;h1&gt;{name}&lt;/h1&gt;
              &lt;p&gt;&lt;FaMapMarkerAlt /&gt; {`${address}, ${city} ${province}, USA, ${zip_code}`}&lt;/p&gt;
              &lt;img src={image} alt={name} width=&quot;700&quot; /&gt;
              &lt;br/&gt;
              &lt;p&gt;{description}&lt;/p&gt;
              &lt;br/&gt;
              &lt;h4&gt;Amenities:&lt;/h4&gt;
    &lt;div&gt;
    { 
                    Object.entries(amenities).map(
                      ([key, value]) =&gt; {
                          if(value){
                              return &lt;p&gt;{key}&lt;/p&gt;
                          }
                         return null
                      }
                  )
                 }
              &lt;/div&gt; 
          &lt;/div&gt;
  
  
  
          &lt;/div&gt;
      ) 
  }
  
  export default Beach
  </code></pre>
  <p>Any idea how to fix this and pull to properly up the object amenities?</p>