list doesn't render in react using .map

Question

I have an array of objects and I want to render those objects in a list. I have the following code:

import { useState } from "react";


function Question4Comp(props) {
  
  const [poeple, setPoeple] = useState( [ {"Name": "Dana", "Age": 20, "City": "Haifa" },
                                        {"Name": "Ron", "Age": 22, "City": "Tel Aviv" }, 
                                        {"Name": "Dov", "Age": 31, "City": "Ashdod" }, 
                                        {"Name": "Vered", "Age": 19, "City": "Eilat" }] );

  function returnList() {
    poeple.map( (item, index) => { 
      return <li key={index}>
                {item.Name}
                <ul>
                  <li> Age: {item.Age} </li>
                  <li> City: {item.City} </li>
                </ul> 
             </li>      
    })
  }

  return (
    <div className="App">
      <ul>
        {returnList()}
      </ul>
    </div>
  );
}

export default Question4Comp;

I'm calling the returnList function that's supposed to return the list items but nothing renders to the page. it's blank.

whats am I missing? Thanks.

Answer 1

The result of people.map() is not being returned in the function returnList().

...
  function returnList() {
    return poeple.map( (item, index) => { 
      return <li key={index}>
                {item.Name}
                <ul>
                  <li> Age: {item.Age} </li>
                  <li> City: {item.City} </li>
                </ul> 
             </li>      
    })
  }
...

CodeSandbox