Ternary statement not accepted in JSX (Unexpected token "?")-CodePudding

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?

CodePudding user response：

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>
    </>
  );

CodePudding user response：

Here's the problem.

          (
            {shouldRenderPlanA ? (

You can't expect to return an object, instead

  (shouldRenderPlanA ?

Or try to write something simple at the beginning , ex. flag?1:0 to get it working before plugging other things :)

CodePudding user response：

You have an error because you didn't return a value inside the map

Maybe this can help you

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

You muset remove the parentheses, and return the element