Разделяем ленту на переиспользуемые блоки

Мы выделяем каждый логический кусок интерфейса в отдельный компонент.

Создание поста

Компонент CreatePost отвечает за поле ввода нового поста.

function CreatePost({ value, onChange, onCreate, disabled }) {
    return (
        <div className="create-post">
            <textarea
                placeholder="Что у вас нового?"
                value={value}
                onChange={(e) => onChange(e.target.value)}
            />
            <button
                onClick={onCreate}
                disabled={disabled}
            >
                Опубликовать
            </button>
        </div>
    );
}

e.target.value — это текущее значение поля ввода. Когда пользователь печатает, onChange получает это значение через e.target.value и передаёт его в App.

Шапка поста

PostHeader отображает автора.

function PostHeader({ author }) {
    return (
        <div className="post-header">

Здесь author.avatar и author.name приходят через пропсы — они разные для каждого поста. А «2 часа назад» написано прямо в JSX, потому что это статичный текст, одинаковый для всех постов.

Действия под постом

PostActions — кнопки лайка и комментариев.

function PostActions({ likes, liked, commentsCount, onLike, onToggleComments }) {
    return 

Комментарии

Comments — блок с комментариями и полем ввода.

function Comments({ comments, postId, newComment, onCommentChange, onAddComment })

.trim() убирает пробелы в начале и конце строки. Без него пустой ввод с пробелами (" ") считается валидным — кнопка будет активна, а комментарий пустой. С .trim() проверяем реальное содержание.

Сборка поста

Post — главный компонент, собирает всё вместе.

function Post({ post, onLike, onToggleComments, newComment, onCommentChange, onAddComment }

Сколько пропсов — нормально?

У Post — 6 пропсов. Это допустимо, потому что он сложный и собирает подкомпоненты.
Лучше не делать больше 7–8 пропсов в одном компоненте. Если их слишком много — значит, можно выделить ещё один уровень (например, отдельный PostContent).
Но 5–6 — нормально для "контейнерного" компонента.

Комоненты в App

В App — вся логика и состояние. Просто заменяем JSX на компоненты.

function App() {
    // ... весь код состояния и функций ...

    return (
        <div className

Ключи в списках

При рендере posts.map обязателен key={post.id} — React использует его для отслеживания изменений. Без ключа будет предупреждение и возможны ошибки при обновлении.