React Fragments: the miracle cure for div-itis!

[bobbysebolao]

In case you don't know, React provides a component called Fragment that you can use in place of a div to group together JSX elements inside a return block. You can import it from React and use it exactly like you would use a div, the advantage is that it Fragments don't appear in the rendered HTML page (in other words, it doesn't clutter the web page with semantically meaningless divs) :

import React, { Fragment } from 'react'

export default ({ startGame, topScore, chooseCharacter, chooseDifficulty }) => {
  return (
    <Fragment>
       ...
       ...
       ...
       ...
       ...
    </Fragment>
  )
}

[jamesj-0]

This is great! I was quite baffled at the start as we'd been taught about the pitfalls of div-itis, but then react in the week we were just placing everything into divs.

I will make sure to share this with the rest of the cohort 🤩