So, please help me understand how is this supposed to work.
I know that you should create separate components for separate functionalities and have everything in its own component because it is easier to manage and expand further.

For example let's say we want to create a page of some sort of blog post.

You would need the post itself which can be a component <Post/> and if you want to have comments you can have another separate component called <Comment/>

And you would do something like this I guess:

<div>
<Post post={post}/>
{post.comments.map(comment=><Comment key={comment.id} comment={comment}/>)}
</div>

But comment on it's own makes no sense without a post, so this confuses me, those components that we create can be used on their own, but this doesn't mean that they should be able to be used on their on independently every time anywhere right? Or should they?

I'm sorry if it's a stupid question but for me it makes sense.