在 jsx 中使用 .map 的代码出错

import React from 'react';
import './dialogs.css'
import { NavLink } from 'react-router-dom';
const DialogsItem = (props) => {
    let path = "/Dialogs/" + props.id;
    return (
    <NavLink to={path}>{props.name}</NavLink>
    )
}
const Dialogs = (props) => {
    let dialogData = [
        {id:1, name:"Marsen"},
        {id:1, name:"Baiel"},
        {id:1, name:"Ablai"}
    ]
    let dialogElements = dialogData
    .map (dialog => <DialogsItem name = {dialog.name} id = {dialog.id}/>)
    return (
        <div className="Dialogs">
            <div className="DiaologsItem">
               {/* <DialogsItem name="Marsen" id="1"/>
               <DialogsItem name="Baiel" id="2"/>
               <DialogsItem name="Ablai" id="3"/> */}
            </div>
        </div>
    )
}
export default Dialogs

不显示名称 marsen、ablai、baiel