react return内でmapを2度回してHTMLタグを実装したい

前提・実現したいこと

Reactでアプリを作成中。
APIのレスポンスをUIに反映したいがAPIのレスポンス上mapを2重で回した上でHTMLを構成したい。
しかし、下記部分でエラーが発生してしまいます。

投稿主は知見不足であるため記述方法がわからず困っている状態です。
最終的にはdata.titleも表示できItemコンポーネントも表現できる状態にしたいです。

ご指摘いただけると幸いです

該当のソースコード

function DeterminedRecruiting({ props }: Props) {
  console.log(scheduleListRes);

  return (
    <>
        {props.sections.map((data) =>
        //ここで一度divタグでdata要素の一部を表示したい
        <div>{data.title}</div>
          //このdataが上記HTMLが入ることでエラーとなる
          data.applications.map((o) => (
            <Item
              title={o.title}
              img={o.img}
              workEndsAt={o.workday.endsAt}
              shopName={o.shop?.name}
              // buttons={o.buttons}
              firstButton={o.buttons[0] ? o.buttons[0] : null}
              secondButton={o.buttons[1] ? o.buttons[1] : null}
            />
          )),
        )}
      </>
}

行動規範の内容に同意します

回答2件

HTMLタグと他のものを混ぜて出力したいなら、一度フラグメントをはさみましょう。

jsx
1  return (
2    <>
3        {props.sections.map((data) =>
4        <>
5          <div>{data.title}</div>
6          {
7          //このdataが上記HTMLが入ることでエラーとなる
8          data.applications.map((o) => (
9            <Item
10              title={o.title}
11              img={o.img}
12              workEndsAt={o.workday.endsAt}
13              shopName={o.shop?.name}
14              // buttons={o.buttons}
15              firstButton={o.buttons[0] ? o.buttons[0] : null}
16              secondButton={o.buttons[1] ? o.buttons[1] : null}
17            />
18          ))
19          }
20        </>
21        )}
22      </>