Помогите вынести в отдельную компоненту, с сохранением встроенных функций. Кнопку получилось создать, а вот постоянно выкидывает ошибки. Вот оригинальный код (в закомментированном - мои попытки сделать компоненту):
import React from "react";
import Post from "./Post/Post";
import {addPostActionCreator, updateNewPostTextActionCreator} from "../../../redux/profileReducer";
import s from "./MyPosts.module.css";
import Button from "../../EnterText/Button/Button";
import Textarea from "../../EnterText/Textarea/Textarea";
function MyPosts(props) {
let postsElement = props.postData.map(post => <Post message={post.message} id={post.id}
likesCount={post.likesCount}/>);
let newPostElement = React.createRef();
let addPost = () => {
props.dispatch(addPostActionCreator());
}
let onPostChange = () => {
let text = newPostElement.current.value;
let action = updateNewPostTextActionCreator(text);
props.dispatch(action);
}
return (
<div>
<h2>My posts</h2>
<div className={s.input_text}>
<div>
<div>
<textarea placeholder={"Enter your message"}
onChange={onPostChange}
ref={newPostElement}
value={props.newPostText}/>
</div>
{/*<Textarea onChange={onPostChange}*/}
{/* ref={newPostElement}*/}
{/* value={props.newPostText}/>*/}
<Button onClick={addPost}/>
</div>
</div>
<div>
New posts
{postsElement}
</div>
</div>
);
}
export default MyPosts;
Вот код моей компоненты Textarea (вроде все пытаюсь пропихнуть через props, но оно не работает, как только начинаешь вводить текст - выскакивает ошибка):
import React from 'react';
import s from "./Textarea.module.css"
const Textarea = (props) => {
return (
<div>
<textarea placeholder={"Enter your message"}
className={s.text_window}
onChange={props.onChange}
ref={props.ref}
value={props.value}/>
</div>
);
};
export default Textarea;