Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React fragment shorthand failing to compile

The project in question is using React-16.2.0 which has the capability to use Fragments and the Fragment shorthand.

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

While the full-length syntax works fine...

import React, { Fragment, Component } from 'react';  class TestingFragment extends Component {     render() {         return (             <Fragment>                 <span>This is a fragment of text </span>                 <div>Another part of the fragment</div>             </Fragment>         )     } };  export default TestingFragment 

The shorthand fails to compile and I am at a loss as to why this is. Fore example...

import React, { Component } from 'react';  class TestingFragment extends Component {     render() {         return (             <>                 <span>This is a fragment of text </span>                 <div>Another part of the fragment</div>             </>         )     } };  export default TestingFragment 

Which fails to compile as follows...

Failed to compile ./src/testingFragments.js Syntax error: Unexpected token (6:4)    4 |   render() {   5 |       return ( > 6 |           <>     |            ^   7 |               <span>This is a fragment of text </span>   8 |               <div>Another part of the fragment</div>   9 |           </> This error occurred during the build time and cannot be dismissed. 

Is there something here I am missing about the Fragment shorthand syntax?

like image 219
Robert Byrne Avatar asked Jan 18 '18 07:01

Robert Byrne


People also ask

What is the shorthand for React fragment?

<> is the shorthand tag for React. Fragment which allows us to group a list of elements without wrapping them in a new node. The only difference between them is that the shorthand version does not support the key attribute. Follow me on Twitter and GitHub to get more useful contents.

Which is better <> or React fragment?

Therefore, React fragments are better than the 'div' tags. With React Fragment, you can render multiple elements of a component without adding extra div tags. We can write cleaner, more readable code with React Fragments. It takes up less memory and renders components faster.

Do React fragments need keys?

We no longer need to provide keys, we don't need to add array commas, and we still avoid adding an extraneous DOM element because React. Fragment doesn't become an actual element during rendering. We can import Fragment to avoid having to fully write out React. Fragment .

Is React fragment a div?

React Fragment vs divReact Fragment is a component exposed by React which serves as a parent component in JSX but doesn't add anything to the DOM. The div element on the other hand is an HTML element with no semantic meaning but when used, will be added to the DOM as a node.


2 Answers

I think this is a reason:

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax

screenshot

create-react-apps currently use Babel 6.26.0 for full support React.Fragment is needed Babel v7.0.0-beta.31 and above

======================= EDIT

It's working now with create-react-app v2 https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

like image 129
KORA Avatar answered Oct 08 '22 09:10

KORA


You can use the poor man's fragment shorthand as a quick fix: [ , ]

render(){   return [     <div key="f">foo</div>,     <div key="b">bar</div>   ] } 

as array of nodes is a valid jsx element. You need to add a key prop to each of them manually though as Anarno pointed out.

like image 25
gazdagergo Avatar answered Oct 08 '22 09:10

gazdagergo