Как вернуть несколько элементов в JSX

При написании JSX в React есть одно предостережение: вы должны вернуть один родительский элемент. Не больше одного.

Например, это невозможно:

const Pets = () => {
  return (
    
    
  )
}

Один “классический” способ решить эту проблему – обернуть компоненты и другие HTML-элементы в див :

const Pets = () => {
  return (
    

      
      
    
  )
}

Однако это создает проблему – есть элемент HTML, который был введен только для того, чтобы заставить наш JSX работать, не обязательно в результирующем HTML, но на этом он заканчивается.

Одним из решений является возврат массива элементов JSX:

const Pets = () => {
  return [
      ,
      
  ]
}

Другое решение – использовать Fragment, относительно новую функцию React, которая решает эту проблему для нас:

const Pets = () => {
  return (
    
      
      
    
  )
}

он работает так же, как элемент div , который мы добавили ранее, но он не появится в результирующем HTML-файле, отображаемом в браузере. Беспроигрышный вариант.

Оригинал: “https://flaviocopes.com/jsx-return-multiple-elements/”