I have a component “speaker” with bunch of stuff inside:
- Photo
- Name
- Job
- Company
- Biography
But not all speakers have company, some of them are labled as “expert at something”. When I don’t insert anything in “company”, I want this block to dissapear from DOM or hide at least because it messes with my flex layout.
Heavy usecase - biography. It’s a block with display: none
by default that appers as a popup when you click on a speaker (I added some JS there). And there’s a lot of stuff inside of biography block - there’s header with speaker’s photo, name, company (dublicated) then divider and bio bellow as a long text. So, if I didn’t put anything in “biography” property, then I want that whole biography block to dissapear.
I think the only way to achieve this is to add more variants of conditions for elements inside component. There should be conditions based on properties. If property biography !== ''
, then show this block - some like that.