Conditionally render multiple elements inside a react fragment

Question

I have a function that takes a few booleans and should render an html element for each boolean if it's true. This is what I want to do:

function renderThis (first, second, third) {
  if (!(first || second || third)) {
    return <span>each input is false</span>
  }
  return (
  //README: This part below doesn't work. How can I conditionally render these span tags below?
    <React.Fragment>
      {
        first
          ? <span>First is true</span>
          : null
        second
          ? <span>Second is true</span>
          : null
        third
          ? <span>Third is true</span>
          : null
        credit
      }
    </React.Fragment>
  )
}

The fragment doesn't work now. I can conditionally render one element (for instance, I can render first if I remove the subsequent second and third variables and their associated code), but not all three. How can I conditionally render all three variables here?

Answer 1

Turn your returned elements into an array . You can't return adjacent jsx

 <React.Fragment>
      {
        [
           true ? <span key='1'>First is true</span>: null,
           true ? <span key='2'>Second is true</span>: null,
           false ? <span key='3'>Third is true</span>: null
        ]

      }
    </React.Fragment>

If you are returning just the array you don't need Fragment

return [
   true ? <span>First is true</span>: null,
   true ? <span>Second is true</span>: null,
   false ? <span>Third is true</span>: null
]

Also, you can't return adjacent jsx from the same statement, but you can return adjacent unary statements

return(
    <>
        {true ? <span /> : null} 
        {false ? <span /> : null}
    </>
)

Answer 2

If you want to render all three spans based on condition of each one you could do something like this:

function renderThis(first, second, third) {
  if (!(first || second || third)) {
    return <span>each input is false</span>;
  }
  return (
    //README: This part below doesn't work. How can I conditionally render these span tags below?
    <React.Fragment>
      {first && <span>First is true</span>}
      {second && <span>Second is true</span>}
      {third && <span>Third is true</span>}
    </React.Fragment>
  );
}

Answer 3

The Array approach seems overly complicated to me. Why not just this?

<React.Fragment>
   {true  && <span>First is true</span>}
   {true  && <span>Second is true</span>}
   {false && <span>Third is true</span>}
</React.Fragment>