JSX conditional rendering syntax error

Question

I have the following component:

export const Checkmark = props => (
  <Layout {...props}>
    { 
      if(props.checked){
        <Icon name="checkmarkBlue" small />
      } 
    }
  </Layout>
)

my linting is complaining about the "if" saying (unexpected token)

There's [an entire page about this in the docs](https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator). — Jordan Running, Feb 22 '18 at 15:57

score 4 · Accepted Answer · answered Feb 22 '18 at 15:51

Inside the brackets there must be expressions. You could change it to a ternary:

  { props.checked ? <Icon name="checkmarkBlue" small /> : "" }

Alternatively if you really need statements, you might use an IIFE

{(function(){
  if(props.checked)
    return <Icon name="checkmarkBlue" small />;
  //...
  return "";
})()}

RIYAJ KHAN · Answer 2 · 2018-02-22T15:58:35.963

1

From React#github

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction

you should use short-circuit instead.

<Layout {...props}>
    {     
      props.checked && <Icon name="checkmarkBlue" small />     
    }

Or

   render(){

      let myHtml = "";

      if(props.checked){
        myHtml = <Icon name="checkmarkBlue" small /> 
      }

      return (<Layout {...props}> { myHtml}</Layout>);
    }

edited Feb 22 '18 at 15:58

answered Feb 22 '18 at 15:54

RIYAJ KHAN

15,032
5
31
53

You might want to link to a current version of the docs. https://reactjs.org/docs/conditional-rendering.html#inline-if-else-with-conditional-operator – Jordan Running Feb 22 '18 at 15:57
@JordanRunning thanks man. – RIYAJ KHAN Feb 22 '18 at 15:59

JSX conditional rendering syntax error

2 Answers2