updating HTML in react/gatsby - reactjs

Question

I'm trying to re render my HTML after I have clicked on a badge:
onClick={() => filterCategories(c.category)}
The code:
const BlogPage = props => {
console.log(props);
//After I click on the button comes back with the correct posts.
let posts =
props.data.allContentfulPost !== undefined
? props.data.allContentfulPost.edges
: props.data;
const categoriesStyle = {
marginBottom: '8px',
};
const filterCategories = category => {
posts = posts.filter(p => p.node.category === category);
BlogPage({ data: posts });
};
return(
<span tabIndex="0" key={c.id}
onClick={() => filterCategories(c.category)}
role="button"
onKeyDown={filterCategories}>
<Badge value={c.category} category={c.category} color="#fff">
{c.category}
</Badge>
</span>
)
}
So if I'm not mistaking I have to make use of setState, but when I try to use it I can't do it because is not a class and I will need a class to add the constructor as well right? The problem with this code is that it was writing by someone else using Gatsby and I'm new to React and Gatsby

Answer 1

I'd recommend you maintain the category in state and then filter posts based on that stateful category.
const BlogPage = props => {
const [category, setCategory] = useState(null);
const posts =
props.data.allContentfulPost !== undefined
? props.data.allContentfulPost.edges
: props.data;
const categoriesStyle = {
marginBottom: '8px',
};
const filterCategories = category => {
setCategory(category)
};
// These are your filtered posts
const filteredPosts = category ?
posts.filter(p => p.node.category === category) :
posts;
return(
<span tabIndex="0" key={c.id}
onClick={() => filterCategories(c.category)}
role="button"
onKeyDown={filterCategories}>
<Badge value={c.category} category={c.category} color="#fff">
{c.category}
</Badge>
</span>
)
}