We will now edit the PostsSection component to make it functional. First, we need to import the relevant action and selector from postsSlice to index.js.

import { selectPosts, createPost } from './features/postsSlice';

When we click the Post button, it should dispatch the createPost action with the relevant data. We will store the text of the textarea element inside a local state called text.

However, we also need an interface for showing the add posts. For that, we will create a new component called Posts and use the selectPosts selector to retrieve the posts and display them using the map method.

function Posts(props) {
  const posts = useSelector(selectPosts);
  return (
    <div>
      {posts.map((item) => 
        <div key={item.id}>
          <p>{item.text}</p>
          <p>{item.author}</p>
        </div>
      )}
    </div>
  );
} 

We can now show this component inside the PostsSection.

We can further improve the code but creating a new component called CreatePost and putting the relevant code into that component to make things more organized.

Currently, the UI might look very rough and simplistic, but we will add CSS styling in the upcoming chapters.

If you try creating new posts they should appear in the form of a list.