How to hide logo if there is no logo? - reactjs

Question

I am using react-bootstrap Thumbnails to show a bunch of logo.
If there is no logo then I am setting a default logo.
But now I want the default logo also should not show.
So,if I remove the default logo, then I am getting the breakup image.
Here is the code -->
function ExpoCard({
data
}) {
const {logo} = data;
let defaultLogo = 'defaultLogo.png';
const URL = `${CLOUDINARYURL}/${isDisplayPage ? displayImgConfig : imgConfig}/${IMAGE_URL}${logo || defaultLogo}`;
<Thumbnail
src={URL}
alt={name}
onClick={() => setData && setData(data)}
className={cx('expo-card-thumbnail', setData && !isDisplayPage && 'cursor exhibitor-logo-portal-page')}
>
{!hideBoothName && (
<div
className={cx(
boothSize === 'LARGE' || boothSize === 'MEDIUM' ? 'expo-title-large' : 'expo-title-small',
'ex-title-name',
)}
style={{ color: nameColor || '#000000' }}
>
<LinkWithTooltip isText tooltip={name} placement="top">
{name}
</LinkWithTooltip>
</div>
)}
{categoryName && <div className="ex-tag-line">{categoryName}</div>}
<div>
{shortDescription && (
<>
<LinkWithTooltip isText tooltip={shortDescription} placement="top">
<div className="expo-card-desc-container m-t-5">
<div
className={cx(
boothSize === 'LARGE'
? 'expo-card-desc-large'
: boothSize === 'MEDIUM'
? 'expo-card-desc-medium'
: 'expo-card-desc-small',
'expo-card-desc',
)}
style={{ color: shortDescriptionColor || '#000000' }}
>
{shortDescription}
</div>
</div>
</LinkWithTooltip>
</>
)}
</div>
<div className="card-footer">
{isShowAvailability && !isDisplayPage && !disableChat && !isSearching && status && (
<span className={cx('ex-status-label', status)} style={{ position: 'absolute' }}>
{status}
</span>
)}
{!isDisplayPage
? data.sponsorUrl !== '' && (
<a
className="viewExpoBtn"
role="button"
tabIndex="0"
aria-label={name}
onKeyPress={(e) => e.key === 'Enter' && setData && setData(data)}
>
<i className="ac-icon-arrow-right pull-right btn" />
</a>
)
: (data.linkToSite || data.sponsorUrl) && (
<a
className="viewExpoBtn"
role="button"
tabIndex="0"
aria-label={name}
onKeyPress={(e) => e.key === 'Enter' && setData && setData(data)}
>
<i className="ac-icon-arrow-right pull-right btn" />
</a>
)}
</div>
</Thumbnail>
}
I was thinking of creating a class display-none and when there is no logo, Thumbnail should add display-none class but if I do so,everything gets hidden including name.

Answer 1

There are a few options:
Instead of hiding the Thumbnail itself just hide the IMG element inside with CSS child selectors.
You can do something like:
.hide-thumbnail >img{
display:none;
}
Add this hide-thumbnail class to Thumbnail when you don't want a picture to show up.
Set a 0 size picture as the default logo:
You can create an empty picture in paint on Windows and use that as the default picture
Move everything out of Thumbnail into a different Component and show Thumbnail along the new component only when you need it.
Option 1 and 2 are not great but can work as a quick solution.