[React]YouTubeのAPIから表示させたい

Question

要件

YouTubeのAPIを利用して情報を抜き出して、
JSXで表示させたい

できたこと

YouTubeのAPIを利用して情報を抜き出し（console.logまで）

console.log(articles.items);

エラー

snippetの中に格納されてるっぽいので以下のようにしたのですが
エラーでうまく表示できない。

console.log(articles.items.snippet);

各項目を出すにはどうしたらいいのでしょうか？
thumbnailsなんかはさらにオブジェクトで入っているので出し方がわかりません。

Comments

[Hogeike]

エラーが出ているならエラーを書いてください

Answer 1

エラーでうまく表示できない。

どううまくいかないのでしょうか？
意図した動作と、そうならなかった場合の挙動(今回でいうところのエラー内容)を提示しないと回答側としては何ともいえません。

推測ですがarticles.itemsは配列なので、

// console.log(articles.items.snippet);
console.log(articles.items[0].snippet);

が正しいのではないでしょうか？

各項目を出すにはどうしたらいいのでしょうか？

thumbnailsなんかはさらにオブジェクトで入っているので出し方がわかりません。

これはもうレスポンスの仕様に従ってくださいとしか言いようがありません。
thumbnailsも単にオブジェクトであるというだけなので、

console.log(articles.items[0].snippet.thumbnails);

のようにすればいいのではないでしょうか？

Answer 2

YouTubeのAPIの応答内容はJSON形式で帰ってきます。
YouTube Data API の概要
Search: list
Search
項目名等は上記URLに記載があります。
それに合わせて加工すればよいだけです。