44

I have the following component that renders a series of components. However, I downloaded React 16.2 and tried to use fragments instead of divs, but I get the following error:

Error in ./src/containers/answers.js
Syntax error: Unexpected token (24:5)

  22 |     
  23 | return (
> 24 |     <>
     |      ^
  25 |       {AnswersCard}
  26 |     </>
  27 |    )

Why am I getting this error when fragments are supposed to be able to replace divs in React 16.2?

  question ? 
    AnswersCard = ( question.answers.sort(function(a,b) { return (a.count < b.count) ? 1 : ((b.count > a.count) ? -1 : 0)} 
    ).map(answer =>  
    <Answer key={answer.id} answer={answer} questionId={question.id} />
    )) : AnswersCard = ( <p>Loading...</p> )

return (
    <>
      {AnswersCard}
    </>
   )
  }
}
Dog
  • 2,726
  • 7
  • 29
  • 66

1 Answers1

55

As per the documentation, the syntax <></> is not supported by all tools and they encourage you to use <React.Fragment> instead

Check this documentation on Support for Fragment syntax

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • @shubham Khatri You are life saver – Nimmi Verma Aug 24 '18 at 07:14
  • 2
    Exactly you right, new `XML`/`JSX` syntax fragment, hence `<>>` needs to run with babel version **7**. –  Jun 05 '19 at 17:57
  • If you are using newer version of react via CRA and Gatsby. I don't think `<>` being unrecognized is still an issue. The recommended standard might have changed between this answer at in 2020. – Dan May 01 '20 at 00:20
  • 2
    it's still an issue in Next.js + TSX – revelt Sep 05 '21 at 12:16
  • 9
    2023 and it's still an issue following this tutorial: https://react.dev/learn/tutorial-tic-tac-toe#setup-for-the-tutorial – Callam Delaney Apr 10 '23 at 16:44
  • I was also following the tutorial and switching to a newer version of `react-scripts` solved it. More details here: https://stackoverflow.com/a/76455176/328817 – Sam Jun 12 '23 at 09:17