how to apply conditional css without using jquery or js in react

Question

I have a code like this

<div class="abc">
    <componentName > abc </componentName>
    <component2> </component2> 
</div>

component2 is getting values from DB, and I want when component2 doesn't get any value, I want it to be hidden or display: none. But I've to do it using via CSS only and I can't add any class in components, I cant use JS, react, or jquery. Any workaround will be helpful.

Answer 1

For now, when it's empty I have applied display: none; there when it's empty or do not have any value. Play by putting values in it and make it empty again. or you can also check the CSS by inspecting the element

 componenet2:empty { display: none; }

 <div class="abc"> <componentName > abc </componentName> <componenet2></componenet2> </div>