App_React

1
import React from "react";
2
import MyButton from "./UI/button/MyButton";
3
import {useNavigate} from "react-router-dom";
4

5
const PostItem = (props) => {
6
   const navigate = useNavigate()
7
   return(
8
            <div className="post">
9
            <div className="post__content">
10
               <strong>{props.post.id}. {props.post.title}</strong>
11
               <div>{props.post.body}</div>
12
            </div>
13
            <div className="post__btns">
14
               <MyButton onClick={() => navigate(`/posts/${props.post.id}`,{replace: true})}>Открыть</MyButton>
15
               <MyButton onClick={() => props.remove(props.post)}>Удалить</MyButton>
16
            </div>
17
         </div>
18
   )
19
}
20

21
export default PostItem;
22

23
//* Реализуем удаление постов - MyButton
24
//* Реализуем функционал, который будет удалять посст
25
//* принцип такой же, с функцией обратного вызова
26
//* RemovePost() - принимает post 
27
//* для этого предназначени функция filter которая возвращает новый массив, отфльтрованный по какомуто условию
28
//* там мы проверяем id, если преданный айдишник элемента, не равен тому айдишнику, что мы передали с постом, 
29
//* то мы просто удаляем этот элмент из массива
30
               //*у поста будет id и по этому id пост будет удален из массива
31
//* фукцию удалени пришлось прокинуть на 2 уровня - сначала в PostList, потом в PostItem