title: Map though an object inside a single array using JSX
body: <p>So I have this single object which has a nested list of object which is &quot;loans&quot;</p>
  <pre><code>{
      &quot;cid&quot;: 1,
      &quot;fname&quot;: &quot;test fnamne&quot;,
      &quot;mname&quot;: &quot;test mname&quot;,
      &quot;lname&quot;: &quot;test lane&quot;,
      &quot;address&quot;: &quot;test address&quot;,
      &quot;gender&quot;: &quot;Male&quot;,
      &quot;sourceOfFund&quot;: &quot;work&quot;,
      &quot;coMaker&quot;: null,
      &quot;contactNumber&quot;: &quot;09382853287432&quot;,
      &quot;loans&quot;: [
          {
              &quot;id&quot;: 1,
              &quot;location&quot;: 1,
              &quot;area&quot;: 100,
              &quot;pricePerArea&quot;: 4000,
              &quot;interest&quot;: 16,
              &quot;term&quot;: 24,
              &quot;downPayment&quot;: 20000,
              &quot;dppurpose&quot;: 1
          }
      ]
  }
  </code></pre>
  <p>how can I effectively map through the loans object using jsx code in react?
  I currently have this code:</p>
  <pre><code>  function DataFetching() {
  
      const [customer, setCustomer] = useState({})
      const [id, setId] = useState(1)
      const [idFromButtonClick, setIdFromButtonClick] = useState(1)
  
      const handleClick = () =&gt; {
          setIdFromButtonClick(id)
      }
  
      useEffect(() =&gt; {
          axios 
              .post(`http://localhost:9090/api/customer/getCustomerByCid`,{cid:idFromButtonClick})
              .then(res =&gt; {
                  console.log(res)
                  setCustomer(res.data)
              })
              .catch(err =&gt; {
                  console.log(err)
              })
      }, [idFromButtonClick])
      return (
          &lt;div&gt;
              &lt;input type='text' value={id} onChange={e =&gt; setId(e.target.value)}/&gt;
              &lt;button type='button' onClick={handleClick}&gt;Fetch Post&lt;/button&gt; &lt;br&gt;&lt;/br&gt;&lt;br&gt;&lt;/br&gt;
              
             { customer.loans.map(item =&gt; (&lt;li key={item.id}&gt;{item.area}&lt;/li&gt;))}
             
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>which is giving me an error of  &quot;Cannot read property 'map' of undefined&quot;
  any help would be appreciated.</p>