title: Filter items by category - React
body: <p>I have a list of posts that are organized by category. Currently it lists them on the page like:</p>
  <pre><code>Leisure
      -leisure post 1
      -leisure post 2
      -leisure post 3
  Sports
      -sports post 1
      -sports post 2
      -sports post 3
  ...and so on (these are not the exact categories and posts, just and example of how they are listed on the page right now)
  </code></pre>
  <p>which is created with the following component:</p>
  <pre><code>const Posts = ({ state }) =&gt; {
    const postsPerCategory = getPostsGroupedByCategory(state.source);
  
    return (
      &lt;&gt;
        {postsPerCategory.map(({ category }, index) =&gt; {
          return (
            &lt;button key={index}&gt;{category.name}&lt;/button&gt;
          )
        })}
  
        {postsPerCategory.map(({ posts, category }, index) =&gt; {
          return (
            &lt;div key={index}&gt;
              &lt;h4&gt;{category.name}&lt;/h4&gt;
              {posts.map((post, index) =&gt; {
                return (
                  &lt;article key={index}&gt;
                    {post.title.rendered}
                  &lt;/article&gt;
                )
              })}
            &lt;/div&gt;
          )
        })}
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>The <code>console.log(postsPerCategory)</code> returns an array with objects in the following image:</p>
  <p><a href="https://i.stack.imgur.com/Gq6nL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gq6nL.png" alt="enter image description here" /></a></p>
  <p>I've created a <code>div</code> that maps the <code>postsPerCategory</code> so that there is a button for each category. But I am trying to use hooks so that when each category button is selected only the posts from that category are listed. I am new to using hooks, so I am really lost on how to create the onClick function that would do what I am needing. So far for the buttons I have the following, which is already in the code above:</p>
  <pre><code>{postsPerCategory.map(({ category }, index) =&gt; {
    return (
      &lt;button key={index}&gt;{category.name}&lt;/button&gt;
    )
  })}
  </code></pre>
  <p>How would I create the function that does what i am looking for?</p>