Why is the Cannot read properties of undefined (reading 'map') error coming out?

Question

React

I want to throw the data in MyPost up into index.js, but as you can see from the question, there is an error that I can’t figure out how to solve, or at least figure out what’s wrong with
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();

Answer 1

You pass the "posts" prop with a small letter to the Profile component, then inside the Profile component you pass the props "props.Posts" with a capital letter to the MyPost component, and inside the MyPost component "props.posts" becomes undefined