ошибка в коде с использованием .map в jsx

Question

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

Answer 1

Вы собираете в dialogElements все DialogsItem, но не выводите этот массив

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} key = {dialog.id}/>)
    return (
        <div className="Dialogs">
            <div className="DiaologsItem">
               { dialogElements }
            </div>
        </div>
    )
}
export default Dialogs

БЛОГ НА HUSL

ошибка в коде с использованием .map в jsx

Ответы (1 шт):