React Component没有正确解构json

Question

I am fooling around with a news api in react in order to learn more about components and how they work/reading in api calls dynamically. However, I cannot get my component to correctly destructure my articles json.

For now, I am making a call to the api, pulling in "Business Articles" just by copy and pasting for now, and exporting that as "BlogPosts". My "ArticlesBox.jsx" contains my props. And in the "ArticlesWrapper.jsx" I declare a function that should read in the props for the imported component - and in the "ArticlesWrapper()" is where I am trying to map my news articles.js to create all of the news article posts from the api call.

So far, it seems to map the appropriate amount of articles but none of what I am trying to map appears. In other words, it just makes a ton of boxes with my alt "Failure" on it.

My Goal is to eventually be able to map through this api and render a ton of news articles at once no matter how big the call - but as of right now I am having trouble completing that task. I've attached my latest iteration of an attempt below. thank you guys in advance!

ArticlesBoxes.jsx:

    import "./ArticleBoxes.css";

export default function ArticleBoxes(props) {
  return (
    <div>
      <div>
        <img src={props.urlToImage} className="imgImage" alt="Failure"></img>
      </div>
      <div className="blogContent">
        <h2 className="blogTitle">
          <a className="blogTitleAnchor" href={props.url}>
            {props.title}
          </a>
        </h2>

        <div className=""></div>

        <ul className=""></ul>
        <div className=""></div>
      </div>
    </div>
  );
}

ArticlesWrapper.jsx:

import "./ArticlesWrapper.css";
import ArticleBoxes from "./ArticleBoxes.jsx";
import BlogPosts from "./articles.js";

function createBlogPost(newsArticle) {
  return (
    <ArticleBoxes
      key={newsArticle.id}
      src={newsArticle.urlToImage}
      href={newsArticle.url}
      blogTitleAnchor={newsArticle.title}
    />
  );
}

export default function ArticlesWrapper() {
  return <div className="articlesWrapper">{BlogPosts.map(createBlogPost)}</div>;
}

and here are the articles:

const BlogPosts = [
  {
    source: {
      id: null,
      name: "New York Post",
    },
    author: "Sam Raskin",
    title:
      "Wild video reportedly shows drunken flier shove girlfriend, slug airport worker - New York Post ",
    description:
      "The viral, 43-second clip captures the moment the would-be EasyJet passenger violently pushed his gal pal down and punched an airline employee after the flier wasn’t allowed on a flight",
    url:
      "https://nypost.com/2022/06/26/easyjet-passenger-shoves-girlfriend-punches-airport-worker/",
    urlToImage:
      "https://nypost.com/wp-content/uploads/sites/2/2022/06/easy-jet-comp.jpg?quality=75&strip=all&w=1024",
    publishedAt: "2022-06-26T19:17:00Z",
    content:
      "Wild video shows a drunken British vacationer shoving his girlfriend to the floor and slugging a security worker at an airport in England after he was banned from a flight, according to reports. \r\nTh… [+1742 chars]",
  },
  {
    source: {
      id: null,
      name: "CNBC",
    },
    author: "Jessica Sonkin",
    title:
      "‘Apathetic’ investors will embrace banks: RBC top analyst predicts comeback in year’s second half - CNBC",
    description:
      "RBC Capital Markets' top banking analyst Gerard Cassidy expects strong revenue growth and optimism surrounding credit will boost banks.",
    url:
      "https://www.cnbc.com/2022/06/26/apathetic-investors-to-embrace-banks-rbc-top-analyst-sees-comeback.html",
    urlToImage:
      "https://image.cnbcfm.com/api/v1/image/106839744-1613124725309-gettyimages-1277228344-_dsc0449.jpeg?v=1656270600&w=1920&h=1080",
    publishedAt: "2022-06-26T19:13:35Z",
    content:
      "Investors who are \"apathetic\" or negative toward banks will change their stance in the year's second half, according to RBC Capital Markets' top banking analyst.\r\nGerard Cassidy predicts bullishness … [+2567 chars]",
  },
  {
    source: {
      id: null,
      name: "Yahoo Entertainment",
    },
    author: "Alexandra Semenova",
    title:
      "Stocks pace towards worst start since 1970: What to know this week - Yahoo Finance",
    description:
      "The end of the second quarter and the first half of the year will bring a busy week to markets that remain on pace for their worst start to a year in decades...",
    url:
      "https://finance.yahoo.com/news/what-to-know-this-week-in-markets-june-27-184417186.html",
    urlToImage:
      "https://s.yimg.com/ny/api/res/1.2/cB7MggYAQk3eBkA6pJRp4A--/YXBwaWQ9aGlnaGxhbmRlcjt3PTEyMDA7aD04MDA-/https://s.yimg.com/os/creatr-uploaded-images/2022-06/800b17a0-f542-11ec-bdf3-77a6aa355e37",
    publishedAt: "2022-06-26T18:44:17Z",
    content:
      "The week ahead will bring to an end the second quarter and the first half of what has been a challenging 2022 for investors.\r\nSeveral key economic reports, including core PCE inflation the Federal Re… [+8151 chars]",
  },
  {
    source: {
      id: "cnn",
      name: "CNN",
    },
    author: "Parija Kavilanz",
    title:
      "Just keep your returns: Stores weigh paying you not to bring back unwanted items - CNN",
    description: "",
    url: "https://www.cnn.com/2022/06/26/business/retail-returns/index.html",
    urlToImage:
      "https://media.cnn.com/api/v1/images/stellar/prod/220626130102-target-shopper-0518.jpg?c=16x9&q=w_800,c_fill",
    publishedAt: "2022-06-26T17:15:00Z",
    content:
      "The chaotic mix of record fuel prices and an unending supply chain crisis have retailers considering the unthinkable: Instead of returning your unwanted items, just keep them.\r\nIn recent weeks, some … [+3981 chars]",
  },
  {
    source: {
      id: "the-washington-post",
      name: "The Washington Post",
    },
    author: "Joe Yonan",
    title:
      "Sweet potato salad with fresh salsa is a thrifty, tasty dish - The Washington Post",
    description:
      "This recipe from the team behind the « Bosh » vegan cooking channel is hearty, healthy — and affordable.",
    url:
      "https://www.washingtonpost.com/food/2022/06/26/sweet-potato-salsa-salad-recipe/",
    urlToImage:
      "https://www.washingtonpost.com/wp-apps/imrs.php?src=https://arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/THCSP3XTCII6ZLAWR67XDFGNPA.jpg&w=1440",
    publishedAt: "2022-06-26T17:00:00Z",
    content:
      "Placeholder while article actions load\r\nHenry Firth and Ian Theasby have a simple answer to the question of how to save money on food: Cook.\r\nIn their latest book, Bosh on a Budget, the friends behin… [+6482 chars]",
  },
  {
    source: {
      id: null,
      name: "Yahoo Entertainment",
    },
    author: "Sam Ro",
    title: "The bad economic news that the Fed is looking for - Yahoo Finance",
    description:
      "Federal Reserve Chair Jerome Powell reiterated the central bank’s top priority right now: Bringing down inflation.",
    url:
      "https://finance.yahoo.com/news/the-bad-economic-news-that-the-fed-is-looking-for-155728245.html",
    urlToImage:
      "https://s.yimg.com/os/creatr-uploaded-images/2022-06/f6ece680-f567-11ec-bfd6-300e76ca8a9a",
    publishedAt: "2022-06-26T15:57:28Z",
    content:
      "This post was originally published on TKer.com.\r\nFederal Reserve Chair Jerome Powell reiterated the central banks top priority right now: Bringing down inflation.\r\nIts unconditional, our commitment, … [+9229 chars]",
  },
  {
    source: {
      id: "fox-news",
      name: "Fox News",
    },
    author: "Stephen Sorace",
    title:
      "Baby formula shipment arrives from overseas in Houston, enough for 1.5M bottles - Fox News",
    description:
      "A cargo plane carrying more than 150,000 pounds of baby formula from overseas landed at Bush Intercontinental Airport in Houston early Sunday, according to a local report.",
    url: "https://www.foxnews.com/us/baby-formula-overseas-houston",
    urlToImage:
      "https://static.foxnews.com/foxnews.com/content/uploads/2022/06/baby-formula-empty-shelf.jpg",
    publishedAt: "2022-06-26T15:51:22Z",
    content:
      "A cargo plane from Germany landed at Bush Intercontinental Airport in Houston, Texas, early Sunday, carrying more than 150,000 pounds of baby formula, according to a local report.\r\nThe shipment, part… [+1609 chars]",
  },
  {
    source: {
      id: "cnn",
      name: "CNN",
    },
    author: "Ramishah Maruf",
    title: "All the recession warning signs this week - CNN",
    description:
      "It's the question everyone is asking: Are we about to enter a recession?",
    url:
      "https://www.cnn.com/2022/06/26/business/recession-signs-roundup/index.html",
    urlToImage:
      "https://media.cnn.com/api/v1/images/stellar/prod/220625141843-new-construction-california-0614-restricted.jpg?c=16x9&q=w_800,c_fill",
    publishedAt: "2022-06-26T15:42:00Z",
    content:
      "Its the question everyone is asking: Are we about to enter a recession?\r\nA tepid stock market, soaring inflation, and rising interest rates have left Americans less than optimistic about the state of… [+4793 chars]",
  },
  {
    source: {
      id: null,
      name: "Yahoo Entertainment",
    },
    author: "Mike Bebernes",
    title:
      "Is it worth risking recession to get inflation under control? - Yahoo News",
    description:
      "Interest rates hikes can be a reliable tool for taming runaway prices, but they often lead to stifled economic growth and a spike in unemployment.",
    url:
      "https://news.yahoo.com/is-it-worth-risking-recession-to-get-inflation-under-control-150844387.html",
    urlToImage:
      "https://s.yimg.com/os/creatr-uploaded-images/2022-06/154e6ed0-f560-11ec-96bf-b0175df91c43",
    publishedAt: "2022-06-26T15:08:44Z",
    content:
      "The 360 shows you diverse perspectives on the days top stories and debates.\r\nWhats happening\r\nBy most measures, the United States economy has thrived in the two-plus years since it was abruptly derai… [+8173 chars]",
  },
  {
    source: {
      id: null,
      name: "The Daily Hodl",
    },
    author: "Daily Hodl Staff",
    title:
      "Billionaire Mark Cuban Analyzes One of His Largest Crypto Investments, Outlines How Play-To-Earn Economies ... - The Daily Hodl",
    description:
      "Billionaire and Shark Tank star Mark Cuban is weighing in on how blockchain-based play-to-earn (P2E) games can revamp their economy.",
    url:
      "https://dailyhodl.com/2022/06/26/billionaire-mark-cuban-analyzes-one-of-his-largest-crypto-investments-outlines-how-play-to-earn-economies-can-recover/",
    urlToImage:
      "https://dailyhodl.com/wp-content/uploads/2022/02/gamestop-partners-with-nft.jpg",
    publishedAt: "2022-06-26T14:30:13Z",
    content:
      "Billionaire and Shark Tank star Mark Cuban is weighing in on how blockchain-based play-to-earn (P2E) games can revamp their economy.\r\nIn a new interview with Bankless, Cuban, who’s an investor in Axi… [+1973 chars]",
  },
  {
    source: {
      id: "google-news",
      name: "Google News",
    },
    author: null,
    title:
      "Why This Crypto Crash Is Different: Don't Fight The... - Investor's Business Daily",
    description: null,
    url:
      "https://news.google.com/__i/rss/rd/articles/CBMiVmh0dHBzOi8vd3d3LmludmVzdG9ycy5jb20vbmV3cy9iaXRjb2luLWNyYXNoLWNyeXB0by1pY2UtYWdlLWZlZC1yYXRlLWhpa2VzLWFyZS1yZWFzb24v0gEA?oc=5",
    urlToImage: null,
    publishedAt: "2022-06-26T14:27:00Z",
    content: null,
  },
  {
    source: {
      id: null,
      name: "msnNOW",
    },
    author: null,
    title:
      "Lawn mower recall: This popular mower can catch fire just sitting in your garage - msnNOW",
    description: null,
    url:
      "https://www.msn.com/en-us/lifestyle/shopping/lawn-mower-recall-this-popular-mower-can-catch-fire-just-sitting-in-your-garage/ar-AAYSJmw?li=BBnb2gh",
    urlToImage: null,
    publishedAt: "2022-06-26T13:12:59Z",
    content: null,
  },
  {
    source: {
      id: null,
      name: "Benzinga",
    },
    author: "Henry Khederian",
    title:
      "So Which Will Happen First, Ethereum At $10K Or Dogecoin At $0.50? - Benzinga - Benzinga",
    description:
      "Every week, Benzinga conducts a survey to collect sentiment on what traders are most excited about, interested in or thinking about as they manage and build their personal portfolios.",
    url:
      "https://www.benzinga.com/markets/cryptocurrency/22/04/26557793/which-will-first-ethereum-at-10k-or-dogecoin-at-0-50",
    urlToImage:
      "https://cdn.benzinga.com/files/images/story/2022/04/09/polynesia-3021072_1.jpg?width=1200&height=800&fit=crop",
    publishedAt: "2022-06-26T13:12:00Z",
    content:
      "Every week, Benzinga conducts a survey to collect sentiment on what traders are most excited about, interested in or thinking about as they manage and build their personal portfolios.\r\nThis week, we … [+1593 chars]",
  },
  {
    source: {
      id: "associated-press",
      name: "Associated Press",
    },
    author: "Paul Wiseman",
    title:
      "Did corporate greed fuel inflation? It's not biggest culprit - The Associated Press - en Español",
    description:
      "WASHINGTON (AP) — Furious about surging prices at the gasoline station and the supermarket, many consumers feel they know just where to cast blame: On greedy companies that relentlessly jack up prices and pocket the profits.",
    url:
      "https://apnews.com/article/inflation-russia-ukraine-covid-health-government-and-politics-999a756b89b09b65d335856cf570737e",
    urlToImage:
      "https://storage.googleapis.com/afs-prod/media/30649c6512354e78abee8fd35d537916/3000.jpeg",
    publishedAt: "2022-06-26T13:08:06Z",
    content:
      "WASHINGTON (AP) Furious about surging prices at the gasoline station and the supermarket, many consumers feel they know just where to cast blame: On greedy companies that relentlessly jack up prices … [+8733 chars]",
  },
  {
    source: {
      id: "google-news",
      name: "Google News",
    },
    author: null,
    title:
      "Inflation is why tips are down for some service-sector workers - USA TODAY",
    description: null,
    url:
      "https://news.google.com/__i/rss/rd/articles/CBMicGh0dHBzOi8vd3d3LnVzYXRvZGF5LmNvbS9zdG9yeS9tb25leS9wZXJzb25hbGZpbmFuY2UvMjAyMi8wNi8yNi9pbmZsYXRpb24tdGlwcy1kb3duLXJlc3RhdXJhbnRzLWJhcnMvNzcwNjY3NDAwMS_SAQA?oc=5",
    urlToImage: null,
    publishedAt: "2022-06-26T13:00:59Z",
    content: null,
  },
  {
    source: {
      id: null,
      name: "CNBC",
    },
    author: "Tanaya Macheel",
    title:
      "No-fee trading has arrived for crypto. Here's what that may mean for revenue at these companies - CNBC",
    description:
      "Crypto companies are at a crossroads with the introduction of zero-fee trading. Analysts are uncertain about how these trading platforms may handle it.",
    url:
      "https://www.cnbc.com/2022/06/26/no-fee-trading-has-arrived-for-crypto-heres-what-that-may-mean-for-revenue-at-these-companies.html",
    urlToImage:
      "https://image.cnbcfm.com/api/v1/image/106868438-1618431329101-gettyimages-1232307162-COINBASE_IPO.jpeg?v=1656247277&w=1920&h=1080",
    publishedAt: "2022-06-26T12:34:21Z",
    content: null,
  },
  {
    source: {
      id: "cnn",
      name: "CNN",
    },
    author: "Paul R. La Monica, CNN Business",
    title: "Electronic Arts is still the odd one out in gaming - CNN",
    description:
      "All things considered, video game leader Electronic Arts is having a pretty decent year despite inflation worries, recession fears and other macroeconomic headwinds. Shares of EA are only down about 2% in 2022, a drop that's not nearly as bad as the rest of t…",
    url:
      "https://www.cnn.com/2022/06/26/investing/stocks-week-ahead/index.html",
    urlToImage:
      "https://cdn.cnn.com/cnnnext/dam/assets/220623155025-electronic-arts-fifa-game-file-super-tease.jpg",
    publishedAt: "2022-06-26T12:00:00Z",
    content:
      "A version of this story first appeared in CNN Business' Before the Bell newsletter. Not a subscriber? You can sign up right here.\r\nNew York (CNN Business)All things considered, video game leader Elec… [+4339 chars]",
  },
  {
    source: {
      id: null,
      name: "CNBC",
    },
    author: "Macklin Fishman",
    title:
      "Exxon Mobil CEO cautions against an abrupt energy transition, warning underinvestment leads to high gas prices - CNBC",
    description:
      "The CEO of Exxon Mobil cautions against an abrupt energy transition, warning underinvestment will lead to high gas prices.",
    url:
      "https://www.cnbc.com/2022/06/26/exxon-mobil-ceo-darren-woods-on-energy-transition-gas-prices.html",
    urlToImage:
      "https://image.cnbcfm.com/api/v1/image/107078620-1655836217414-Z-CNBC_220624_MarketsPolitics_DarrenIntvFormal_Dirty_10.jpg?v=1655836425&w=1920&h=1080",
    publishedAt: "2022-06-26T11:05:01Z",
    content:
      'Exxon Mobil CEO Darren Woods warns that an abrupt transition to renewable energy will cause society to "pay a high price."\r\nThe national average price for a gallon of gasoline is currently nearly $5,… [+1702 chars]',
  },
  {
    source: {
      id: "fortune",
      name: "Fortune",
    },
    author: "Shawn Tully",
    title:
      "The housing market is weakening fast—but there are no signs yet that a 2008-style crash is coming - Fortune",
    description:
      "But a slowdown in housing market gains isn't the same as a drop in prices. Quite the contrary: The fundamentals suggest values will still be rising at the close of 2022, and keep slogging ahead through next year.",
    url:
      "https://fortune.com/2022/06/26/housing-market-outlook-prices-appreciation/",
    urlToImage:
      "https://content.fortune.com/wp-content/uploads/2022/06/Real-Estate-13.jpg?resize=1200,600",
    publishedAt: "2022-06-26T11:00:00Z",
    content: "Skip to Content",
  },
  {
    source: {
      id: "reuters",
      name: "Reuters",
    },
    author: null,
    title: "French energy giants urge consumers to cut energy use - Reuters",
    description:
      "The heads of France's big energy companies on Sunday urged individuals and businesses to limit power consumption immediately to prepare for a looming energy crisis.",
    url:
      "https://www.reuters.com/business/energy/french-energy-companies-call-immediately-limiting-energy-use-2022-06-25/",
    urlToImage:
      "https://www.reuters.com/resizer/waL_fZbMKICoos0Z_6TE8DQAi3k=/1200x628/smart/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/PZEB2J6Y7FNI5NPQIRVUZRZACU.jpg",
    publishedAt: "2022-06-26T10:48:00Z",
    content:
      "PARIS, June 25 (Reuters) - The heads of France's big energy companies on Sunday urged individuals and businesses to limit power consumption immediately to prepare for a looming energy crisis.\r\n\"We ne… [+1942 chars]",
  },
];

export default BlogPosts;

Answer 1

try this

  <ArticleBoxes
      key={newsArticle.source.id}
      src={newsArticle.urlToImage}
      href={newsArticle.url}
      blogTitleAnchor={newsArticle.title}
    />

I'm guessing if you checked your console you'd see that id is undefined. You need to define unique ids for each one too since in your data most of the ids are null