CODEWITHSUNDEEP
javascriptreactjs
mouchin777
mouchin777

Reputation: 1588

react, ternary operator not working properly

I have the following tsx piece of code

 empresa && empresa.cabecera && (
                  <React.Fragment>
                    <span>
                      <strong className="u-space-right">CIF</strong> {empresa.cabecera.cif}
                      <strong className="u-space-left u-space-right">Numero Duns</strong> {empresa.cabecera.duns.toString() }
                    </span>
                  </React.Fragment>
                )

Now i need to add a check that .cif and .duns exists Something like

 empresa && empresa.cabecera && (
                  <React.Fragment>
                    <span>
                      {empresa.cabecera.cif && (<strong className="u-space-right">CXF</strong> {empresa.cabecera.cif} )}
                      {empresa.cabecera.duns && (<strong className="u-space-left u-space-right">Number DXns</strong> {empresa.cabecera.duns.toString() })}
                    </span>
                  </React.Fragment>
                )

But it isnt letting me do so

Whats the deal?¿

Upvotes: 0

Views: 441

Answers (1)

HichamELBSI
HichamELBSI

Reputation: 1719

You can't render multiple-element like that. You have to wrap them in a fragment or empty tags.

{someCondition && otherCondition && (
   <React.Fragment>
     <span>
       {condition && (
         <React.Fragment>
            <strong className="...">{...}</strong>
            {something}
         </React.Fragment>
       )}
       {condition2 && (
         <React.Fragment>
            <strong className="...">{...}</strong>
            {something2}
         </React.Fragment>
       )}
     </span>
   </React.Fragment>
)}

Upvotes: 1

Related Questions