Passing BEM className in React

Question

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.

1. Every element needs it's own unique className
2. Cascading dependencies (.posts-new post or .posts-old post) should be avoided
3. Each component defines a new Block on its outermost element

What 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="?"

Answer 1

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.