Итак, проблема в том, что мы не можем передать несколько элементов HTML/JSX или компонентов React в оператор возврата компонента.

return (
<p>
I am First Element
</p>
<p>
I am First Element
</p>
);

Это может привести к ошибке!

Итак, чтобы решить эту проблему, у нас есть один подход по умолчанию, т. е. обернуть эти два элемента ‹p› в один элемент ‹div›.

return (
<div>
<p>
I am First Element
</p>
<p>
I am First Element
</p>
</div>
);

Это точно решит вашу проблему!

Но это своего рода ограничение, или может быть какой-то сценарий, когда вы хотите вернуть несколько элементов, не заключая их в родительский элемент ‹div› для стиля или по каким-либо другим причинам!

Так что делать?

Вот второй подход к решению этой ошибки.

return [
<p>
I am First Element
</p>,
<p>
I am First Element
</p>
];

Здесь вместо того, чтобы возвращать элементы в круглых скобках (), мы будем возвращать их в квадратных скобках []. Теперь эти элементы возвращаются в виде списка/массива иони должны быть разделены запятой (,)как мы это делаем в обычных списках/массивах!

Ура! Проблема решена🎉🎊

Но подождите, вы получаете предупреждение в консоли?

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

Ключи могут быть любыми, например комбинацией алфавитов и цифр или динамически сгенерированных случайных ключей или чем угодно.

return [
<p key="xyz1">
I am First Element
</p>,
<p key="xyz2">
I am First Element
</p>
];

Примечание. Ключи должны быть уникальными для каждого элемента.

Теперь у нас есть еще один подход к решению этой ошибки. Проверь это.

В React есть компонент под названием Fragment. Мы можем обернуть другие элементы в этот компонент фрагмента, а не в элемент DOM ‹div›, потому что этот фрагмент не отображается на экране, в отличие от ‹div›.

return (
<React.Fragment>
<p>
I am First Element
</p>
<p>
I am First Element
</p>
</React.Fragment>
);

Если вы не хотите использовать его с точкой (.), вы можете импортировать его из React и использовать.

import React , {Fragment} from "react";
return (
<Fragment>
<p>
I am First Element
</p>
<p>
I am First Element
</p>
</Fragment>
);

Это был мой первый блог, и если он вам помог, пожалуйста, хлопните в ладоши.

Спасибо.