Ternirary operator in compoennt to pass prop to styled component?

Question

I have a boolean variable isHere which needs to define some additional styles for a component. If I use className then the prop is passed:

  <Item className={isHere ? 'hi' : null}>
    // Stuff
  </Item>

However when I try and pass a styled component's prop I get an error:

    <Item {isHere ? {joined: true} : null}>
      // Stuff
    </Item>

Syntax error: Unexpected token, expected ... (30:15)

Answer 1

  <Item joined={isHere ? true : false}>
    // stuff 
  <LeaveLocation />