React useStateの配列 mapで取得

アプリ開発していて、実装に時間を要したuseStateのmapでの取得方法について共有させていただきます。

useStateの初期値を配列で渡したものの取得方法について様々な取得方法がありました。

.jsx

  const [content, setContent] = useState(["記録１", "記録２", "記録３"]);
  const [time, setTime] = useState([1, 3, 5]);

上記のように初期値をそれぞれのuseStateで定義している場合。

.jsx

{content.map((contents, index) => {
  return (
  <span>{contents}</span>
  <span>{time[index]} 時間</span>
  )
})}

上記のような記述でcontentのデータに対するtimeのデータを取得できます。
time.map((times) => {}) のような記述はしなくても良いということですね。

.jsx

const [contens, setContens] = useState([
  { title: "記録１", time: 1 },
  { title: "記録２", time: 3 },
  { title: "記録３", time: 5 },
]);

上記のように配列オブジェクトで定義した場合は、下記のような記述で取得できます。

.jsx

{contens.map((content) => {
  return (
    <span>{content.title}</span>
    <span> - {content.time} 時間</span>
  );
 })};

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼