[SOLVED] Browserify, react, and the conditional operator

Browserify, react, and the conditional operator

I cannot get browserify to compile a react file in which I'm trying to use a conditional to render.

The render function:

render() {
    const hasObjects = this.state.objects.length === 0 ? false : true;
    return {hasObjects ? (<p> Objects </p>) : (<p>No objects are available.</p>)};   
}

When I try to compile with browserify, I get the following error.

SyntaxError: ~/Projects/Project/src/index.js: Unexpected token, expected , (26:27)
  24 |     render() {
  25 |         const hasObjects = true;
 >26 |         return {hasObjects ? (<p> Objects </p>) : (<p>No objects are available.</p>)}
     |                            ^
  27 |     }
  28 |

I compile with browserify src/index.js -o static/js/bundle.js -t [ babelify --presets [ env react ] ]

and my .bablerc is:

{
     "plugins": [
         "react-html-attrs",
     ]
}

The documentation for react indicates that the conditional is a valid option for conditional rendering so I assume that this is a browserify issue. What option can I set to compile this file?

Solution

You don't need to wrap your expression in {...}, that is only required when passing an expression as a child in JSX. When you leave the braces there, JavaScript thinks you are returning an object.

Just remove the braces:

render() {
  const hasObjects = true;
  return hasObjects ? (<p> Objects </p>) : (<p>No objects are available</p>);
}