ReactJS - Nested tags, variables and text in JSX

user_7344164 0
Viewed 150

I'm unable to fix this simple JSX tag

<>
   {disabled?<b>{label}</b>:'Please enter'+ <b>{label}</b>}
</>

What I want is display variable label(in bold) if disabled is true

And display Please enter label(in bold) otherwise

jsx reactjs
3 Answers

Please enter needs to be written as JSX, not as a string that gets concatenated:

{disabled ? <b>{label}</b> : <>Please enter<b>{label}</b></>}
user_95152070

JSX can return only a single node (or array). Return the second bit in a fragment or some other tag, like div or span.

<>
  {disabled ? (
    <b>{label}</b>
  ) : (
    <>
      Please enter <b>{label}</b>
    </>
  )}
</>
user_86908570

You need to return a single HTML/JSX element.

Something like the below should work:

<>
   {disabled ? <b>{label}</b> : <span>Please enter <b>{label}</b><span>}
</>
user_81517500
Related