I am not getting data of my useState through .map function in React Js

Question

React Js I am trying to display data through .map which is in react state object, but I am not getting data on browser with any error, yes I now that I am not write setState in this code because i want only display my data on my browser. if this problem will be solved then I will done my setState, I Think setState is not necessary for only showing data which is in State Object.

import React from 'react';
import TinderCard from 'react-tinder-card';

function TinderCards(){
    const [people, setPeople] = React.useState([
        {
            name: 'steve jobs',
            url: 'https://cdn.britannica.com/04/171104-050-AEFE3141/Steve-Jobs-iPhone-2010.jpg'
        },
        {
            name: 'mark zukerberg',
            url: 'https://cdn.britannica.com/54/187354-050-BE0530AF/Mark-Zuckerberg.jpg'
        }
    ]);

    return (
        <div>
            {
                people.map(person =>{
                   <h1>{person.name}</h1>
                })
            }
        </div>
    )

    // const people = []    same thing

    // BAD
    // const people = [];
    // people.push('sonny', 'qazi')

    // GOOD (push to an array in REACT)
    // setPeople([...people, 'mathan', 'lal'])
}
export default TinderCards;

Answer 1

You don’t return anything from map.
Change your return section to this:

return (
    <div>
        {people.map(person => (
            <h1>{person.name}</h1>
        ))}
    </div>
)

or if you like to keep the curly brackets syntax:

return (
    <div>
        {people.map(person => {
            return <h1>{person.name}</h1>
        })}
    </div>
)