move data to index.js

hipstagram/src/App.js

@@ -9,7 +9,8 @@ import Music from "./Content/Music/music";
 import Profile from "./Content/Profile/profile";
 import Settings from "./Content/Settings/settings";
 
-function App() {
+function App(props) {
+
   return (
     <BrowserRouter>
       <div className="app-wrapper">
@@ -20,8 +21,8 @@ function App() {
 
           <div className="app-wrapper-content">
             <Redirect exact from="/" to="/profile" />
-            <Route path="/profile" component={Profile} />
-            <Route path="/messages" component={Messages} />
+            <Route path="/profile" render={ () => <Profile post={ props.post } />} />
+            <Route path="/messages" render={ () => <Messages dialogsData={ props.dialogsData } messagesData={ props.messagesData } /> } />
             <Route path="/news" component={News} />
             <Route path="/music" component={Music} />
             <Route path="/settings" component={Settings} />

hipstagram/src/Content/Messages/messages.js

@@ -5,24 +5,10 @@ import "./messages.css";
 
 
 
-const Messages = () => {
+const Messages = (props) => {
 
-  let dialogsData = [
-    {id: 1, name: 'Oleh'},
-    {id: 2, name: 'Victor'},
-    {id: 3, name: 'Maria'},
-    {id: 4, name: 'Valeriy'},
-    {id: 5, name: 'John'}
-  ]
-
-  let messagesData = [
-    {id: 1, message: 'Hi'},
-    {id: 2, message: 'How is your project?'},
-    {id: 3, message: 'Looks not ok'}
-  ]
-
-  let dialog = dialogsData.map(d => <MessageItem name={d.name} id={d.id} /> ); 
-  let messages = messagesData.map( m => <Message message={m.message} />)
+  let dialog = props.dialogsData.map(d => <MessageItem name={ d.name } id={ d.id } /> ); 
+  let messages = props.messagesData.map( m => <Message message={ m.message } />)
 
   return (
     <div className="message-wrapper">

hipstagram/src/Content/Profile/My posts/my posts.js

@@ -4,16 +4,9 @@ import './my posts.css';
 
 
 
-function MyPosts() {
+function MyPosts(props) {
 
-    let post = [
-        {id: 1, message: 'Hi, how are you?', likesCount: 12},
-        {id: 2, message: 'My first post', likesCount: 9},
-        {id: 2, message: 'Bla Bla Bla', likesCount: 9},
-        {id: 2, message: 'Say you\'ll haunt me', likesCount: 9}
-    ]
-
-    let postsElements = post.map( p => <Post message={ p.message } likesCount={ p.likesCount } />)
+    let postsElements = props.post.map( p => <Post message={ p.message } likesCount={ p.likesCount } />)
 
     return(
         <div className="myposts-block">

hipstagram/src/Content/Profile/profile.js

@@ -6,13 +6,14 @@ import ProfileInfo from './ProfileInfo/profileInfo';
 
 
 
-function Profile() {
+function Profile(props) {
+
     return(
         <div className='content-wrapper'>
 
             <div className='content'>
                 <ProfileInfo />
-                <MyPosts />
+                <MyPosts post={ props.post } />
             </div>
        </div>
     );

hipstagram/src/index.js

@@ -4,9 +4,30 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+let post = [
+  {id: 1, message: 'Hi, how are you?', likesCount: 12},
+  {id: 2, message: 'My first post', likesCount: 9},
+  {id: 2, message: 'Bla Bla Bla', likesCount: 9},
+  {id: 2, message: 'Say you\'ll haunt me', likesCount: 9}
+]
+
+let dialogsData = [
+  {id: 1, name: 'Oleh'},
+  {id: 2, name: 'Victor'},
+  {id: 3, name: 'Maria'},
+  {id: 4, name: 'Valeriy'},
+  {id: 5, name: 'John'}
+]
+
+let messagesData = [
+  {id: 1, message: 'Hi'},
+  {id: 2, message: 'How is your project?'},
+  {id: 3, message: 'Looks not ok'}
+]
+
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <App post={ post } dialogsData={ dialogsData } messagesData={ messagesData } />
   </React.StrictMode>,
   document.getElementById('root')
 );