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)
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 "";
})()}
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>);
}
