Return with React, getting a syntax error?

Question

This is my first time using React, and I am confused about the syntax. In Sublime Text I keep getting an error for the open parenthesis after return in the following code saying there is no closure, however I clearly have it near the end of this string of text.

return (
      <>
        <section className="jumbotron jumbotron-fluid text-center">
          <div className="container py-5">
            <h1 className="display-4">Recipes for every occasion</h1>
            <p className="lead text-muted">
              We’ve pulled together our most popular recipes, our latest
              additions, and our editor’s picks, so there’s sure to be something
              tempting for you to try.
            </p>
          </div>
        </section>
        <div className="py-5">
          <main className="container">
            <div className="text-right mb-3">
              <Link to="/recipe" className="btn custom-button">
                Create New Recipe
              </Link>
            </div>
            <div className="row">
              {recipes.length > 0 ? allRecipes : noRecipe}
            </div>
            <Link to="/" className="btn btn-link">
              Home
            </Link>
          </main>
        </div>
      </>
    );
  }

}
export default Recipes;

The code seems to mess up after the backslash in </> and everything after that is the same color as a string.

What am I missing here?

Answer 1

Your Sublime Text JSX highlighter is probably old enough not to support the <> syntax.

Either:

• Update the highlighter (there may be a better one in Package Control)
• Use the long-form <React.Fragment>...</React.Fragment> syntax for fragments.