Не появляются обьекты, которые я передавал. Как это решить?

Question

[Snooom]

Я передал все через props, но оно отрисовало только какую-то часть этой компоненты.
Вот как я передаю содержимое

import React from "react"
import { NavLink } from "react-router-dom"
import {addNewMessageActionCreator, updateNewMessageBodyCreator} from "../../../redux/store"

import DialogMessage from "./DialogMessage"
import StoreContext from "../../../StoreContext"
const DialogMessageContainer = () => {

    return  <StoreContext.Consumer>  
    { store => { 
              let state = store.getState()
            let onNewMessagechange = (body) => {store.dispatch(updateNewMessageBodyCreator(body))} 
         let addMessage = () => {
                 
                    store.dispatch(addNewMessageActionCreator())
                }
          return  <DialogMessage updateNewMessageBodyCreator={onNewMessagechange} sendMessage={addMessage} 
            dialogsPage={state}/>}
        }

   </StoreContext.Consumer> 
 
}

export default DialogMessageContainer

И вот так я его пытаюсь отобразить

import s from "./DialogMessage.module.css"
import React from "react"
import { NavLink } from "react-router-dom"
import {addNewMessageActionCreator, updateNewMessageBodyCreator} from "../../../redux/store"


const DialogMessage = (props) => {
  



    let newMessageBody = props.dialogsPage.state.newMessageBody;

let onNewMessagechange = (event) => {
let body = event.target.value;


props.updateNewMessageBodyCreator(body)

}


    let addMessage = () => {
     
        props.sendMessage()
    }
    return (
        
       <>
       <div className={s.profile}>
        <img src={ props.dialogsPage.state.message.url} alt="img" />
        <div className={s.text}>
            <span><NavLink className={s.navlink} href="/profile">{ props.dialogsPage.state.message.name}</NavLink > <a>{ props.dialogsPage.state.message.time}</a></span>
            <p>{ props.dialogsPage.state.message.message}</p>
          
        </div>
        
       </div>
       <input   onChange={onNewMessagechange}  type="text" />
<button onClick={() => {addMessage()}} >add</button>
       
       </>
    )

}

export default DialogMessage

Comments

[Алексей Уколов]

Очевидно, что в props.dialogsPage.state.message у вас пусто. Почему так по приведённому коду сказать нельзя.

[Snooom]

Алексей Уколов, а как мне отобразить по другому ?

[Snooom]

Алексей Уколов,
вот так выглядит передача через props

[Евгений Беннер]

smoove1117, props.dialogsPage.state.message у тебя массив
По коду ты пытаешься обратиться как к объекту
В JSX нужно поправить это и сделать такого вида как вариант

{props.dialogsPage.state.message.map((item, index) => (
  <p key={`message-${index}`}>{item.message}</p>
))}

[Snooom]

Сделал так но теперь ничего не отображается

import s from "./DialogMessage.module.css"
import React from "react"
import { NavLink } from "react-router-dom"
import {addNewMessageActionCreator, updateNewMessageBodyCreator} from "../../../redux/store"


const DialogMessage = (props) => {
    let newMessageBody = props.dialogsPage.state.newMessageBody;

    let onNewMessagechange = (event) => {
    let body = event.target.value;
    
    
    props.updateNewMessageBodyCreator(body)
    
    }
    
    
        let addMessage = () => {
         
            props.sendMessage()
        }

{props.dialogsPage.state.message.map((item, index) => (
       
    <>
    <div className={s.profile}>
     <img  key={`message-${index}`} src={ item.url} alt="img" />
     <div className={s.text}>
         <span><NavLink className={s.navlink} href="/profile">{ item.name}</NavLink > <a>{ item.time}</a></span>
         <p  key={`message-${index}`} > { item.message}</p>
       
     </div>
     
    </div>
    <input   onChange={onNewMessagechange}  type="text" />
<button onClick={() => {addMessage()}} >add</button>
    
    </>
  ))}

   
    
     
    

}

export default DialogMessage

[Snooom]

Евгений Беннер, Понимаю что нужно вставить return, но уже голова не варит куда

[Евгений Беннер]

smoove1117, это конечно глупо с моей стороны просто код выдать, но всё же

return (
  <>
    {props.dialogsPage.state.message.map((item, index) => (
      <>
        <div className={s.profile}>
          <img  key={`message-${index}`} src={ item.url} alt="img" />
          <div className={s.text}>
            <span><NavLink className={s.navlink} href="/profile">{ item.name}</NavLink > <a>{ item.time}</a></span>
            <p  key={`message-${index}`} > { item.message}</p>
          </div>
        </div>
        <input   onChange={onNewMessagechange}  type="text" />
        <button onClick={() => {addMessage()}} >add</button>
      </>
    ))}
  </>
)

[Snooom]

Евгений Беннер, Спасибо большое!