Почему выходит ошибка Cannot read properties of undefined (reading 'map')?

Question

[Нурислам Нагашыбай]

Хочу данные в MyPost закинуть вверх в index.js но как видно из вопроса выходит ошибка которую я не могу понять как решить или хотя бы разобраться в чем дело
My post:

import React from "react";
import s from './MyPost.module.css';
import Post from './Post/Post';
import DialogsItems from "../../Dialogs/DialogsItems/DialogsItems";
import Message from "../../Dialogs/Message/Message";

const MyPost = (props) => {
    let newPosts = props.posts.map(m => <Post message={m.message} /> );

    return (
        <div className={s.postBlock}>
            <h3>My posts</h3>
        <div>
            <textarea className={s.postSub}>Hello</textarea>
            <br/>
            <button>Add post</button>
        </div>
            <div className={s.posts}>
                {newPosts}

            </div>
        </div>

    );
}
export default MyPost;

Profile:

import React from "react";
import s from './Profile.module.css';
import MyPost from './MyPosts/MyPost'
import ProfileInfo from "./ProfileInfo";
import Post from "./MyPosts/Post/Post";

const Profile = (props) => {

    return (
        <div className={s.content}>
            <ProfileInfo />
            <MyPost posts={props.Posts}/>

        </div>
    );
}
export default Profile;

App.js:

import React from 'react';
import './App.css';
import { BrowserRouter, Routes, Route} from "react-router-dom";
import Nav from './components/Nav/Nav';
import Profile from './components/Profile/Profile';
import s from './components/Header/Header.module.css';
import Dialogs from './components/Dialogs/Dialogs';




function App(props) {

  return (

      <BrowserRouter>
          <div className="App-wrapper">

              <header className={s.Header}>
                  <img className={s.logo} src='https://avatars.mds.yandex.net/i?id=88b5d56ab1e2969c8c7ada7728e6ce5b-5880151-images-thumbs&n=13' alt='Это ссылка'/>
              </header>
              <Nav />
              <div className='app-wrapper-content'>
                  <Routes>
                      <Route path='/' element={<Profile />}/>
                      <Route path='/Dialogs/*' element={<Dialogs dialog={props.dialog} messages={props.messages} />} />
                      <Route path='/Profile' element={<Profile posts={props.Posts}/>}/>
                  </Routes>
              </div>
          </div>
      </BrowserRouter>
  );
}

export default App;

index:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import state from "./Redux/state";
let Posts = [
    {message:'Hello, my name Angela'},
    {message:'Join my team, we will win this game'},
];


ReactDOM.render(
  <React.StrictMode>
    <App Posts={Posts}  />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

Comments

[ArturMavlidov]

Законсоль props.posts сначала в app.js, после в profile.js
Мне кажется, во втором случае будет undefined

[HealSpirit]

Вы в Profile пропс posts зачем-то берёте как Posts
P.s. что за мода называть пропсы с большой буквы?

[Нурислам Нагашыбай]

как писали в ответе и в комментариях я сделал опечатку НО есть еще одна вещь которая вызвала ошибку и это
<Route path='/' element={<Profile />}/> сам не знаю почему

Answer 1

[nakonechnikistryi]

В компонент Profile Вы передаете пропс "posts" с маленькой буквы, далее внутри компонента Profile передаете в компонент MyPost пропс "props.Posts" с большой буквы, и внутри компонента MyPost "props.posts" становится undefined

Comments

[Нурислам Нагашыбай]

исправил, все ровно ошибка выходит