56

In React Native you can encapsulate a set of components in one single <View> (or similar) component. You can also encapsulate a set of components as <> and </>. What are these? Do they just translate to an base View? It's probably not a good practice but it doesn't give a warning and it doesn't crash.

Sander Koldenhof
  • 1,223
  • 4
  • 13
  • 26

5 Answers5

63

It's the React shortcut for Fragment component.

You can write like this : 

import React, { Component } from 'react'

class Component extends Component {
  render() {
    return <> <ComponentA/> <ComponentB/> </>
  }
}

Or without the shortcut and import Fragment component

import React, { Component, Fragment } from 'react'

class Component extends Component {
  render() {
    return <Fragment> <ComponentA/> <ComponentB/> </Fragment>
  }
}

You have to know, you can't use any key or prop with the shortcut syntax.

Here's the official documentation

I hope it helps !

Hurobaki
  • 3,728
  • 6
  • 24
  • 41
  • 1
    Ah, ok! I looked up the <> and > itself but I got no result. Quite handy to know as it seemed just wrong to use a seemingly empty component. i'll mark it as answer when I can. – Sander Koldenhof Jan 15 '20 at 12:48
16

In react <> and </> is just a syntactic sugar for <React.Fragment> . What it basically means is all components should be wrapped in a parent element. So without disturbing the whole schematic design <> provides a wrapper to wrap all your elemnts inside it .

<React.Fragment>
// your code
</React.Fragment>

is same as

<>
// your code 
</>

hope it helps

WangYudong
  • 4,335
  • 4
  • 32
  • 54
Gaurav Roy
  • 11,175
  • 3
  • 24
  • 45
  • Thank you. What happens if we have no code at all between <> and >, for example in a ternary operator in the case we want nothing ? – smartblonde Jul 21 '21 at 16:48
  • ill always advise null rather than empty fragments as it adds in the view tree – Gaurav Roy Jul 25 '21 at 06:20
  • thank you. What is the code for null in this case? – smartblonde Jul 25 '21 at 16:40
  • 1
    @smartblonde why you would like to "render" null at all? Maybe missing something but in the end of the day JSX is used to render something to the DOM. You maybe asking if on some condition that is verified one doesn't want render. Then in this case a conditional render is useful and basically assign to null the variable for that case – Carmine Tambascia Nov 09 '21 at 14:03
  • <> > allow also to avoid repeat extra
    that could be need and also are not rendered in the DOM     – Carmine Tambascia Nov 09 '21 at 14:04
  • @CarmineTambascia yes I've starting to use null instead of <>> in conditional rendering yes. – smartblonde Nov 10 '21 at 22:14
10

In addition to what He has said, it is used to embed many HTMLElements that you don't what them to be nested into a <div> for example.

For example, you may have this use cases

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

For more explanation you can read this React Official Documentation Fragment

Patrissol Kenfack
  • 764
  • 1
  • 8
  • 22
6

One of the highlights of React v16.2 is Fragments. If you're working with React projects, you may be familiar with wrapping your child components with <div> or <span> in your render().

Fragment is a first-class component that you can use to wrap your child components and elements in place of <div> or <span> tags. Like so,

render(){
   return(
      <Fragment> 
        <h2>Heading</h2>
    <ChildA />
      </Fragment>
   );
}

or

render(){
   return(
      <React.Fragment> 
        <h2>Heading</h2>
    <ChildA />
      </React.Fragment>
   );
}

As a shortcut, you can also use empty tags <></> to indicate a fragment. Like so,

render(){
   return(
      <> 
        <h2>Heading</h2>
    <ChildA />
      </>
   );
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
Kent Aguilar
  • 5,048
  • 1
  • 33
  • 20
3

If you dont want to put extra divs & spans,

<></> will be nice pick for you

React does the replacement of React.Fragment component there

<></> == <React.Fragment></React.Fragment>

Muhammed Aslam C
  • 57
  • 1
  • 4