02_lesson: Add author formally into postList

02_lesson
Jason Zhu 2023-03-07 13:33:09 +11:00
parent 83a42fd660
commit 00fcac1145
2 changed files with 14 additions and 1 deletions

View File

@ -0,0 +1,10 @@
import { useSelector } from "react-redux";
import { selectAllUsers } from "../users/usersSlice";
const PostAuthor = ({ userId }) => {
const users = useSelector(selectAllUsers);
const author = users.find((user) => user.id === userId);
return <span>by {author ? author.name : "Unknown author"}</span>;
};
export default PostAuthor;

View File

@ -1,5 +1,6 @@
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { selectAllPosts } from "./postsSlice"; import { selectAllPosts } from "./postsSlice";
import PostAuthor from "./PostAuthor";
const PostsList = () => { const PostsList = () => {
const posts = useSelector(selectAllPosts); const posts = useSelector(selectAllPosts);
@ -7,8 +8,10 @@ const PostsList = () => {
const renderedPosts = posts.map((post) => ( const renderedPosts = posts.map((post) => (
<article key={post.id}> <article key={post.id}>
<h3>{post.title}</h3> <h3>{post.title}</h3>
<h4>{post.userId}</h4>
<p>{post.content.substring(0, 100)}</p> <p>{post.content.substring(0, 100)}</p>
<p className="postCredit">
<PostAuthor userId={post.userId} />
</p>
</article> </article>
)); ));