I'm loosing my mind because I don't understand why the list tags are not rendered in my web. Can someone see what's wrong in the code???

import "./resultBox.css"
import { useRef } from "react"

export default function ResultBox(props){
const resultBox = useRef()
const {resultados} = props

if (resultados != undefined){

    return(
        <div ref={resultBox} id="result-box">
            <ul>
                {resultados.users.map(user => {
                    <li key={user._id}>{user.first_name}</li>
                })}
            </ul>
        </div>
    )
}

}

Thanks!!!

CodePudding user response：

Like what @Dave Newton said, your map function doesn't return anything. Take this example from where I did a similar thing the other day

 const items = historyItems.map((item, index) =>  <HistoryItem key={index} item={item} hourlyRate={props.hourlyRate}/>);
return (<div className="main-history">
    {items}
</div>);