Use <React.Fragment> over <div>s where possible

We wrap a lot of things in <span> or <div> when we don’t need to, simply because JSX needs us to enclose multiple node in a wrapper. But React has a tool for that: https://reactjs.org/docs/fragments.html

We should totally use it. 👍

[willdurand]

It looks like this issue is not really “actionable” to me, because it is a nice thing, yet not something we can do. I don’t think one should spend a lot of time reviewing all our components and decide to use/not use React.Fragment. (The problem with such issues is that they become stale and no one can really work on them)

I’d rather encourage reviewers to suggest the use of React.Fragment when it makes sense, which has been the case multiple times already. On this basis, I am closing the issue.

[tofumatt]

Sadly it’s not as simple as a find/replace, but it’s not too far off!

This patch will require looking through the components and finding instances where we’re wrapping things in a tag simply because JSX requires it. It’s probably a fair amount of manual judgment calls, but a good start would be to look for empty <div> and <span> tags with no attributes/props–chances are they’re there simply to wrap other JSX and can be converted. You’ll want to do it one-by-one though and make sure it doesn’t break anything, but fortunately most of our CSS selectors don’t rely on nesting/tag-type so you should be 👍

Side note: we do have a “good first bug” tag here: https://github.com/mozilla/addons-frontend/issues?q=is%3Aopen+is%3Aissue+label%3A"contrib%3A+good+first+bug" if you’re looking for other issues. This issue isn’t in there but come to think of it is probably fine as a contributor bug, so feel free to work on it.