Как сделать render без div-а, react?

Question

[cester]

Добрый день! Кто знает как в данном случае сделать рендер без div в react?
В react 16 для этого есть Fragment, но сейчас у меня ниже версия.
Кто знает как сделать это?

const Item= ({ list}) => (
  <div>
    {list.map(li=> (
      <p key={li}>{li} </p>
    ))}
  </div>
);

В таком случае

const Item = ({ list}) => list.map(li=> <p key={li}> {li}</p>);

ошибка

A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Comments

[Антон Спирин]

Нескромный вопрос зачем? Рендерить то так и так в контейнер.

[cester]

Антон Спирин, ненужный див

[Антон Спирин]

cester, у вас не див ненужный, а вы компонент неправильно спроектировали. В древовидной структуре список рендерится в контейнер, хоть убейся. Ваша проблема от неправильного проектирования. Измените подход.

[cester]

Антон Спирин, ну и как правильно?

[Антон Спирин]

cester, например так:

const List = ({ list }) => (
  <ul>
    {list.map(item => <Item key={item.id} data={item} />)}
  </ul>
) ;

Item не обязательно делать компонентом. Так же как и List. Все зависит от задачи, размера кода и необходимости переиспользования.

Answer 1

[Mikhail Osher]

const Item = ({ list }) => (
  <React.Fragment>
    {list.map(li => <p key={li}>{li}</p>)}
  </React.Fragment>
);

// EDIT

const Fragment = ({ children }) => children;

const Item = ({ list }) => (
  <Fragment>
    {list.map(li => <p key={li}>{li}</p>)}
  </Fragment>
);

Comments

[cester]

react 15.6

[Mikhail Osher]

cester, добавил другую версию

[Антон Спирин]

Mikhail Osher, и она 100% не будет работать в react 15.6. В 15.6 компонент не может возвращать массив.

[Mikhail Osher]

Антон Спирин, точно, забыл. Могу посоветовать перенести контейнер под список в этот же компонент.

Answer 2

[genius_spirit]

Fragment не обязателен, так же как и div. просто нужно вернуть один основной контейнер, это может быть или или и т.д.
в твоей ошибке говорится что в map нужно делать return:
const Item = ({ list}) => list.map(item => return { item });