[React] APIから渡ってきたデータをkeyを指定しつつ描画させる方法

Question

悩み

NEWS APIから情報を取得して描画させる際、keyを指定しないと、Warning: Each child in a list should have a unique "key" prop.が出てしまうので、指定したいのですが、その書き方がわからず困っています。

#できたこと
keyを指定せずにAPI情報描画

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const URL = `https://newsapi.org/v2/top-headlines?country=jp&apiKey=各自のキーを入れる`;

const NewsIndex = () => {
  const [articles, setArticles] = useState([]);

  console.log(articles);

  useEffect(() => {
    fetchArticles();
  }, []);

  const fetchArticles = async () => {
    try {
      const response = await axios.get(URL);
      setArticles(response.data.articles)
    } catch (error) {
      console.error(error);
    }
  }
 
  return (
    <div className="news">
      <h2>News</h2>
      {articles.map((item) => (
        <div>
          <a href={item.url} target="_blank">{ item.title }</a>
          <img src={ item.urlToImage } alt={ item.title } />
        </div>
      ))}
    </div>
  );
}

export default NewsIndex;

試したこと

Object.keysを取り出してkeyに指定

// 省略
return (
    <div className="news">
      <h2>News</h2>
      {/* {articles.map((item) => (
        <div>
          <a href={item.url} target="_blank">{ item.title }</a>
          <img src={ item.urlToImage } alt={ item.title } />
        </div>
      ))} */}
      {/* 以下に書いてみたけどうまくいかない */}
      {Object.keys(articles).forEach((key) => {
        {articles.map((item) => (
          <div key={key}>
            <a href={item.url} target="_blank">{ item.title }</a>
            <img src={ item.urlToImage } alt={ item.title } />
          </div>
        ))}
      })}
    </div>
  );
// 省略

./src/components/News/Index.js
  Line 34:9:   Nested block is redundant                                                                                                     no-lone-blocks
  Line 36:32:  Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener  react/jsx-no-target-blank

参考　API元抜粋

articles: [
{
source: {
id: null,
name: "Mdpr.jp"
},
author: "モデルプレス編集部",
title: "ダレノガレ明美、薬物検査の結果発表 - モデルプレス",
description: "モデルのダレノガレ明美が31日、TBS系「サンデー・ジャポン」（毎週日曜9時54分～）に出演。薬物疑惑報道を受け、行った毛髪検査の結果を生発表した。",
url: "https://mdpr.jp/news/detail/2087680",
urlToImage: "https://img-mdpr.freetls.fastly.net/article/uq_T/wm/uq_TJuAsSJRgHttqx4aCaGLgOUe_6AuPrRW1HYUwlWo.jpg?width=700&disable=upscale&auto=webp",
publishedAt: "2020-05-31T02:33:34Z",
content: null
},

...他記事がいくつか入っている

}

Answer 1

key属性は一意になるものであればなんでもOKです。
NEWS APIは使ったことがないので詳しいことはわかりませんが、おそらくurlは一意になると思いますのでそれを使います。

<div className="news">
  <h2>News</h2>
  {articles.map((item) => (
    <div key={item.url}>
      <a href={item.url} target="_blank">{ item.title }</a>
      <img src={ item.urlToImage } alt={ item.title } />
    </div>
  ))}
</div>