0

I'm trying to understand when to use <> and when to use <div> when writing React JS code.

The formatting is different when I switch between them but I'm not sure why.

help please
  • 57
  • 2
  • 10
  • can you provide a minimal example? I've used React for a while, and I've literally never seen anyone use `<>` – David Culbreth Sep 01 '21 at 18:59
  • If you use `
    ` you'll get a div and it's children in dom, if you use `<>` you'll get *only* the children in dom.
     – darklightcode Sep 01 '21 at 19:01
  • `<>` is necessary when you want something like three `` tags in a row, but you don't want them to end up in an actual HTML container. It's like a "phantom" container. – Pointy Sep 01 '21 at 19:01
  • 1
    Does this answer your question? https://stackoverflow.com/questions/59751733/react-native-what-exactly-is-the-empty-component – isherwood Sep 01 '21 at 19:01
  • 3
    Does this answer your question? [Why are Fragments in React 16 better than container divs?](https://stackoverflow.com/questions/47761894/why-are-fragments-in-react-16-better-than-container-divs) – vitoke Sep 01 '21 at 19:02
  • @DavidCulbreth - it's possible you're stuck on an older version of React that doesn't support this-- they're called [Fragments](https://reactjs.org/docs/fragments.html) and they've been around for a few years now-- `<>>` is the shorthand syntax for them. – Alexander Nied Sep 01 '21 at 19:05
  • 1
    Duuuuuude, this is so cool! TIL – David Culbreth Sep 01 '21 at 20:06

1 Answers1

1

<>Hello</> is a JSX Element which renders to html text Hello. <div>Hello</div> is a JSX Element containing a div that renders as <div>Hello</div>.

John
  • 1,240
  • 9
  • 13