Ternary statement not accepted in JSX (Unexpected token “?”)

using a ternary statement to render different JSX depending on shouldRenderPlanA property (which resolves true or false). Issue however is that an error appears at the shouldRenderPlanA ternary check with the following:

“Unexpected token ?, expected the token :

Can anyone explain where I might be going wrong? TIA

    return (
      <>
        {options.map(option)}
        <StyledRow>
          {variousOptions.map((opt) => (
            {shouldRenderPlanA ? (            
              <StyledLabelOptionOne
                 variousProps={variousProps}
              />
              ) : (            
              <StyledLabelOptionTwo
                 variousProps={variousProps}
              />
            )}
          ))}
        </StyledRow>
      </>
    );

My suspicion is that it’s something to do with the check happening inside the map?

Answer

You cannot use nested braces {} in JSX, remove the inner ones and it will work:

  return (
    <>
      {options.map(option)}
      <StyledRow>
        {variousOptions.map((opt) => shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
          />
        ))}
      </StyledRow>
    </>
  );