textarea value updeted state (flux cycle)

hipstagram/src/App.js

@@ -21,8 +21,10 @@ function App(props) {
           <Redirect exact from="/" to="/profile" />
           <Route
             path="/profile"
-            render={() => <Profile state={props.state.profilePage} 
-            addPost={ props.addPost }/>}
+            render={() => <Profile profilePage={props.state.profilePage} 
+            addPost={ props.addPost } 
+            updateNewPostText={ props.updateNewPostText }
+            />}
           />
           <Route
             path="/messages"

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

@@ -9,9 +9,12 @@ function MyPosts(props) {
     let newPostElement = React.createRef();
 
     let addPost = () => {
+        props.addPost();
+    }
+
+    let onPostChange = (e) => {
         let text = newPostElement.current.value;
-        props.addPost(text);
-        newPostElement.current.value = ''; 
+        props.updateNewPostText(text);
     }
 
     return(
@@ -19,7 +22,7 @@ function MyPosts(props) {
             My posts
             <div>
                 <div className='myposts-content__block'>
-                    <textarea ref={ newPostElement }></textarea>
+                    <textarea onChange={ onPostChange } ref={ newPostElement } value={ props.newPostText } />
                     <button onClick={ addPost }>Add post</button>
                 </div>
 

hipstagram/src/Content/Profile/profile.js

@@ -4,13 +4,14 @@ import './profile.css';
 import ProfileInfo from './ProfileInfo/profileInfo';
 
 function Profile(props) {
-
     return(
         <div className='content-wrapper'>
 
             <div className='content'>
                 <ProfileInfo />
-                <MyPosts post={ props.state.post } 
+                <MyPosts post={ props.profilePage.post }
+                    newPostText={ props.profilePage.newPostText } 
+                    updateNewPostText={ props.updateNewPostText }
                     addPost={ props.addPost }
                 />
             </div>

hipstagram/src/Redux/state.js

@@ -6,8 +6,9 @@ let state = {
       { id: 1, message: "Hi, how are you?", likesCount: 12 },
       { id: 2, message: "My first post", likesCount: 9 },
       { id: 2, message: "Bla Bla Bla", likesCount: 3 },
-      { id: 2, message: "Say you'll haunt me", likesCount: 46 },
+      { id: 2, message: "Say you'll haunt me", likesCount: 46 }
     ],
+    newPostText: "front end"
   },
   messagesPage: {
     dialogsData: [
@@ -15,24 +16,30 @@ let state = {
       { id: 2, name: "Victor" },
       { id: 3, name: "Maria" },
       { id: 4, name: "Valeriy" },
-      { id: 5, name: "John" },
+      { id: 5, name: "John" }
     ],
     messagesData: [
       { id: 1, message: "Hi" },
       { id: 2, message: "How is your project?" },
-      { id: 3, message: "Looks not ok" },
-    ],
-  },
+      { id: 3, message: "Looks not ok" }
+    ]
+  }
 };
 
-export let addPost = (postMessage) => { 
-  let newPost = { 
+export let addPost = () => {
+  let newPost = {
     id: 5,
-    message: postMessage,
-    likesCount: 0
-  }
+    message: state.profilePage.newPostText,
+    likesCount: 0,
+  };
   state.profilePage.post.push(newPost);
+  state.profilePage.newPostText = '';
   rerenderEntireTree(state);
- }
+};
+
+export let updateNewPostText = (newText) => {
+    state.profilePage.newPostText = newText;
+    rerenderEntireTree(state);
+};
 
 export default state;

hipstagram/src/render.js

@@ -2,14 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom";
 import "./index.css";
 import App from "./App";
-import { addPost } from "./Redux/state";
+import { addPost, updateNewPostText } from "./Redux/state";
 import { BrowserRouter } from "react-router-dom";
 
 export let rerenderEntireTree = (state) => {
     ReactDOM.render(
       <React.StrictMode>
         <BrowserRouter>
-          <App state={state} addPost={addPost} />
+          <App state={state} addPost={addPost} updateNewPostText={ updateNewPostText } />
         </BrowserRouter>
       </React.StrictMode>,
       document.getElementById("root")