Назад к задачам
Junior — Senior
5

Обнаружить и исправить баги в React‑компоненте

Получайте помощь с лайвкодингом в реальном времени с Sobes Copilot
Условие задачи

Найдите и устраните ошибки в следующем React‑компоненте.

 import React, { useEffect, useState } from "react";
import "./index.css";
import PostComponent from "./Post";

Codeium: Refactor | Explain | Generate JSDoc |
export default function App() {
    const posts_list = [
    {
    id: "1",
    name: "siberia can code ㈠",
    imggesrc: "https://avatars.githubusercontent.com/u/45297354?v=4",
    text: "first post",
    },
    {
    id: "2",
    name: "theo",
    imggesrc: "https://avatars.githubusercontent.com/u/6751787?v=4",
    text: "second post",
    },
    {
    id: "3",
    name: "dan abramov",
    imggesrc: "https://avatars.githubusercontent.com/u/810438?v=4",
    text: "third post",
    ],
};

const [selectedId, setPostId] = React.useState(@);
const [Post, setSelectedPost] = React.useState(posts_list[0]);
console.log("@", selectedId);

useEffect(() => {
    setSelectedPost(posts_list[selectedId]);
}, [selectedId]);

return (
    <div className="App">
        <div>selected user:</div>
        <div className="user">
            <img
                className={"avatar"}
                src={Post.imagesrc}
                style={{ width: "30px" }}}
            />
            {Post.name}
        </div>
        <br />
        <br />
        <br />
        <div>posts_list</div>
        {posts_list.length
            ? posts_list.map((el, index) => (
                <PostComponent data={el} onClick={() => setPostId(index)} />
            })
            : []
        }
    </div>
);

``