Fetchしてきたデータが入っているかどうかを確認したい（react）

Question

ご閲覧いただきましてありがとうございます！

React、Youtube APIを使って、取得してきた動画をユーザーが選択したり、選択解除して、あとで保存できるようなアプリを作っています。

こちらの記事を参考にして、ReactでYoutube動画を一覧で出すことまではできました。動画を選択する関数も作ってみたのですが、2点ほど上手くいかず困っています。

まず、現行のコードですと、キーワードから動画が検索されて取得された時点でまだ動画が押されていないのにも関わらずonClick()が発火してしまい**選択状態になってしまいます。**また、それ実際のonClick()を設定しているところは押しても反応しません。。

そして、選択中とそうでない時でビデオサムネイルの背景色を変更したり、onClick()の内容を変更したいと考えているのですが、下記のコードではどうしてもうまく動いてくれません。。

src/components/common/youtube.js

const Youtube = ({ video, handleSelect, classes, selectedVideos }) => {
  const url = "https://www.youtube.com/embed/" + video.id.videoId;
  const videoInfo = video.snippet;
  // 選択できているかどうかを判別する関数を定義しています
  const isSelected = selectedVideos.find(v => v.uid === video.id.videoId);

  return (
    <div>
　　　　// 関数を使って判別しています
      {isSelected ? (
        <Card className={classes.card}>
          <iframe
            id="ytplayer"
            type="ytplayer"
            width="100%"
            height="400"
            src={url}
            frameborder="0"
          />
　　　　　　// カードアクションエリアでonClickを配置しています
          <CardActionArea
            onClick={handleSelect(video.id.videoId)}
          >
            <h2>{videoInfo.title}</h2>
            <p>{videoInfo.description}</p>
          </CardActionArea>
        </Card>
      ) : (
        <Card className={classes.card}>
          <iframe
            id="ytplayer"
            type="ytplayer"
            width="100%"
            height="270"
            src={url}
            frameborder="0"
          />
          <CardActionArea
            onClick={handleSelect(video.id.videoId)}
          >
            <h2>{videoInfo.title}</h2>
            <p>{videoInfo.description}</p>
          </CardActionArea>
        </Card>
      )}
    </div>
  );
};

export default Youtube;

src/components/common/youtube_list.js

const YoutubeList = ({ videos, handleSelect, selectedVideos }) =>
  videos.map(video => (
    <Youtube
      video={video}
      handleSelect={handleSelect}
      selectedVideos={selectedVideos}
    />
  ));

export default YoutubeList;

src/components/common/home.js

const YOUTUBE_API_KEY = process.env.REACT_APP_YOUTUBE_API_KEY;

class Home extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      videos: [],
      selectedVideos: []
    };
  }

  onSerchYoutube = keyword => {
    const url = `https://www.googleapis.com/youtube/v3/search?type=video&part=snippet&q=${keyword}&maxResults=3&key=${YOUTUBE_API_KEY}`;

    axios
      .get(url)
      .then(response => {
        this.setState({
          videos: response.data.items
        });
      })
      .catch(() => {
        console.log("Failed to fetch videos :(");
      });
  };

  _handleSelect = id => {
    const { selectedVideos } = this.state;
    selectedVideos.push({ uid: id });
    console.log("selected!" + id);
    console.log("selected", selectedVideos);
  };

  render() {
    return (
      <div>
        <div>
          <Header title={"Home"} />
          <SearchForm onSerchYoutube={this.onSerchYoutube} />
          <YoutubeList
            videos={this.state.videos}
            handleSelect={this._handleSelect}
            selectedVideos={this.state.selectedVideos}
          />
        </div>
      </div>
    );
  }
}

export default Home;

Answer 1

onClick={() => handleSelect(video.id.videoId)}

onClick()を上記のように変更したらいけました。