APIで取得したデータの画面表示について

Question

こんにちは。

今SpotifyAPI + Reactで楽曲の詳細情報がわかるポートフォリオを作成しているのですが、
取得したデータを画面に描画する方法がわからず詰まっております。

import React, { useState, useEffect } from "react";
import Header from "../Molecules/Header";
import { Credentials } from "../Credentials";
import axios from "axios";
import { useLocation } from "react-router-dom";

const Search = () => {
  // test
  const spotify = Credentials();

  const [token, setToken] = useState("");
  const [trackContents, setTracksContents] = useState(
    []
  );

  const location = useLocation();

  useEffect(() => {
//検索された文字をURLに反映し、反映された文字列を取得
    const searchParams = new URLSearchParams(location.search);
    const queryResult = searchParams.get("query");
    console.log(queryResult);

    // tokenを発行し、権限を付与
    // 付与されたTokenをuseStateのtokenに代入し、値を保持
    axios("https://accounts.spotify.com/api/token", {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization:
          "Basic " + btoa(spotify.ClientId + ":" + spotify.ClientSecret),
      },
      data: "grant_type=client_credentials",
      method: "POST",
    }).then((tokenResponse) => {
      console.log(tokenResponse.data.access_token);
      setToken(tokenResponse.data.access_token);

      // 付与されたtokenを使い、楽曲情報にアクセス
      // 取得した楽曲情報をstateに保存
      // eslint-disable-next-line no-undef
      axios(`https://api.spotify.com/v1/audio-features?ids=${queryResult}`, {
        method: "GET",
        headers: { Authorization: "Bearer " + tokenResponse.data.access_token },
      }).then((tracksReaponse) => {
        setTracksContents(
          tracksReaponse.data.audio_features
        );
      });
    });
  }, [location.search, spotify.ClientId, spotify.ClientSecret]);

  // test end

console.log(trackContents)


  return (
    <div>
      <Header />
        <h2>{trackContents.id}hello</h2>
    </div>
  );
};

export default Search;

console.logでデータが取得できているか確認したところ、
下記のように無事取得できています。

取得した情報を画面に表示したいのですが、

<h2>{trackContents.id}hello</h2>

としても、画面に表示されません。
(helloは表示されています)

非常に初歩的な質問で申し訳ございませんが、
どなたか表示方法をご教授いただけないでしょうか。

よろしくお願いいたします。

Comments

[hoshi-takanori]

trackContents は配列っぽいので、<h2>{trackContents[0].id}hello</h2> なのでは。

[afro097]

上記のように実装したところ、表示できました！
ありがとうございます！

Answer 1

hoshi-takanori様にご回答いただいた方法で実装したところできました！