In the example below, how can I use the Post component in such a way that new posts and old posts have their own unique classes that follow BEM recommendations.
.posts-new post or .posts-old post) should be avoidedWhat I want is for the className to reflect new vs. old. Ideally, post-new and post-old.
One approach I've considered is to pass "new" or "old" via a props attribute (type="old", for example) to the Post component and then dynamically create the className (this post leverages such an approach). Is that the recommended approach for such a situation or is there another technique I'm not seeing?
// Display new posts
Posts className="posts-new"
Post className="?"
// Display old posts
Posts className="posts-old"
Post className="?"
In the end, I chose to use an attribute to pass "new" and "old" from the Posts component to the Post component.
<Posts type="new" />
<Posts type="old" />
Then, in the Post component I was able to add this to the className of my article tag via a template literal.
<article className={`post post-${props.type}`}>
From the feedback I've received from other devs, this is an acceptable approach.