import React, { useState, useMemo } from "react";
import "./Styles/App.css";
import Postlist from "./components/Postlist";
import MyButton from "./components/UI/button/MyButton";
import PostForm from "./components/PostForm";
import PostFilter from "./components/PostFilter";
import MyModal from "./components/UI/MyModale/MyModale";
{/* Root component */}
function App() {
const [posts, setPosts] = useState([
{ id: 1, title: "hello", body: "education" },
{ id: 2, title: "world ", body: "world" },
{ id: 3, title: "Javascript ", body: "syntax" },
]);
const [filter, setFilter] = useState({ sort: "", query: "" });
const [modal, setModal] = useState(false);
const sortedPosts = useMemo(() => {
if (filter.sort) {
return [...posts].sort((a, b) =>
a[filter.sort].localeCompare(b[filter.sort])
);
} else {
return posts;
}
}, [filter.sort, posts]);
const sortedAndSearchedPosts = useMemo(() => {
return sortedPosts.filter((post) =>
post.title.toLowerCase().includes(filter.query.toLowerCase())
);
}, [filter.query, sortedPosts]);
const createForm = (newPost) => {
setPosts([...posts, newPost]);
setModal(false);
};
const removePost = (post) => {
setPosts(posts.filter((p) => p.id !== post.id));
};
return (
<div className="App">
<MyButton style={{ marginTop: 30 }} onClick={() => setModal(true)}>
Create Customer
</MyButton>
<MyModal visible={modal} setVisible={setModal}>
<PostForm create={createForm} />
</MyModal>
<hr style={{ margin: "15px 0" }} />
<PostFilter filter={filter} setFilter={setFilter} />
<Postlist
remove={removePost}
posts={sortedAndSearchedPosts}
title="Posts about JS"
></Postlist>
</div>
);
}
export default App;
{/*Postlist component */}
import React from "react";
import Postitem from "./Postitem";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import { useRef } from "react";
const Postlist = ({ posts, title, remove }) => {
const ref = useRef();
if (!posts.length) {
return <h1 style={{ textAlign: "center" }}>Posts can't be found</h1>;
}
return (
<div>
<h1 style={{ textAlign: "center" }}>{title}</h1>
<TransitionGroup>
{posts.map((post, index) => (
<CSSTransition
key={post.id}
nodeRef={ref}
timeout={500}
classNames="post"
>
<Postitem remove={remove} number={index + 1} post={post} />
</CSSTransition>
))}
</TransitionGroup>
</div>
);
};
export default Postlist;/*App.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#root {
display: flex;
justify-content: center;
}
.App {
width: 800px;
}
.post {
display: flex;
padding: 15px;
border: 2px solid teal;
margin-top: 15px;
justify-content: space-between;
align-items: center;
}
.post-enter {
opacity: 0;
}
.post-enter-active {
transform: translateX(350px);
transition: all 500ms ease-in;
}
.post-exit {
opacity: 1;
}
.post-exit-active {
transform: translateX(-350px);
transition: all 500ms ease-in;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</html>Sadly my youtube guide is 1 year old and react transition group doesn't have nodeRef (in video). Was looking for any other tutorials, but could not find any fresh solution... My code
(Imported useRef) Tried to create variable with useRef() and connect to nodeRef . This way code started working the same way(properly), but animations are not applied . Any suggestions how to make animations work and what nodeRef stands for? (did not understand clearly what it is used for)