Usare i Fragment in React

Prime della versione 16.2 in React eravamo costretti ad usare un elemento padre per raggruppare diversi altri elementi.

Dalla versione 16.2, invece, possiamo usare i Fragment, che sostanzialmente ci evitano di aggiungere altri elementi HTML inutli al DOM.

E questo comporta anche avremmo meno elementi innestati e una migliore organizzazione del codice.

Quindi,  se prima facevamo così:

import React from 'react';

function App() {
  return (
      <div>
        <h1>CIAO</h1>
        <p>Questo è un paragrafo!</p>
      </div>
  );
}

export default App;

Adesso possiamo fare così:

import React from 'react';

function App() {
  return (
      <>
        <h1>CIAO</h1>
        <p>Questo è un paragrafo!</p>
      </>
  );
}

export default App;

Inoltre i Fragment hanno anche alcune prorprietà utili, e volendo possiamo usarli anche per creare elementi da iterazioni su array:

import React from 'react';

function App() {

  const items = [
    {id: 1, nome: "uno"},
    {id: 2, nome: "due"},
    {id: 3, nome: "tre"},
  ];

  return (
      <>
        {items.map((i) => (
            <React.Fragment key={i.id}>
              <p>{i.nome}</p>
            </React.Fragment>
          ))}
      </>
  );
}

export default App;

Enjoy!