Обзор кода компонентов App.tsx и Post.tsx

Необходимо выполнить ревью исходных файлов App.tsx и Post.tsx.

// App.tsx

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

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

  const [selectedId, setPostId] = React.useState(0);
  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>
  );
}

// Post.tsx

const Posts = ({ data, onClick }: any) => {
  const IMAGE = data.imagesrc;

  return (
    <div className="post" onClick={onClick}>
      <img className={"avatar"} src={IMAGE} style={{ width: "30px" }} />
      {data.name}
      <p>{data.text}</p>
    </div>
  );
};

export default Posts;