WordPress - conditional statement in custom block JS

Question

I'm developing a few custom blocks for easy page-building according to our website's visual guidelines.

My question is simple: how can we create a conditional statement that will add an element to the page if true, and do nothing if false?

Code here

// parent block    
el(
'div',
{className:'block-hero__linkbox'},
// conditional child block that is shown only if attributes.linked1text is not blank                
attributes.link1text ? el('a', {className:'block-hero__links 
txt_colorwhite',href:attributes.link1href},attributes.link1text.concat(' »'),), : null,
// other stuff to follow
)

Thanks in advance

Answer 1

To optionally render elements, use Conditional Rendering with the logical && operator, eg:

el('div', { className: 'block-hero__linkbox' },
<p>
    {attributes.link1href && // if link1href evaluates to "true"
        el('a', // render this
            {
                className: 'block-hero__links txt_colorwhite',
                href: attributes.link1href
            },
            attributes.link1href // the link content
        )}
            Other content..
            </p>)

If there is no default or the value of the attribute link1href equates to false, then no link is rendered.