# Особенности возврата нескольких тегов в JSX

Через `return` нельзя возвращать сразу несколько тегов. То есть следующий код работать не будет:

`function App() { return ( <div> <p>text1</p> <p>text2</p> </div> <div> <p>text3</p> <p>text4</p> </div> ); }`

Чтобы желаемое заработало, нам придется взять наши теги в какой-нибудь общий тег, например, вот так:

`function App() { return ( <div> <div> <p>text1</p> <p>text2</p> </div> <div> <p>text3</p> <p>text4</p> </div> </div> ); }`

Такой прием сработает, однако, он не без недостатков: в результате рендеринга мы получим дополнительный див, который мы в общем не хотели и ввели исключительно для корректности работы React. Этот див, к примеру, может сломать нам часть верстки.

Для избежания таких проблем в React введен специальный пустой тег `<></>`, который группирует теги, но в готовую верстку не попадает. Давайте воспользуемся этим тегом:

`function App() { return ( <> <div> <p>text1</p> <p>text2</p> </div> <div> <p>text3</p> <p>text4</p> </div> </> ); }`

Автор следующего кода хочет вернуть сразу два тега `ul`:

`function App() { return <ul> <li>text1</li> <li>text2</li> <li>text3</li> </ul> <ul> <li>text1</li> <li>text2</li> <li>text3</li> </ul>; }`

Код, однако, не работает. Исправьте ошибку автора кода. Предложите два способа решения проблемы.

←→
↑