Iterating through JSON array, accessing name for output and Id to set className

I’m practicing doing api calls by fetching the fortnite upcoming items.

I am trying to access both the itemId and the name of the items within the json array which looks roughly like this:

data: Array(67)
0: {itemId: "bcc523f5-bef4-44eb-8855-35a1413b669c", lastUpdate: 1617619592, item: {…}}
1: {itemId: "723a761f-fa59-4cfc-92e7-9309a87c5a9e", lastUpdate: 1617585135, item: {…}
}

and then:

0:
item: {name: "Ruby Shadows", description: "Sometimes you gotta go dark.", type: "outfit", rarity: "epic", series: "shadow", …}
itemId: "bcc523f5-bef4-44eb-8855-35a1413b669c"
lastUpdate: 1617619592
__proto__: Object

I’m using .map to do so, but in some instances, the object literal inside <h3 key={items.itemId}> doesn’t return the desired result. (currently returning undefined)

I’ve been cracking my head over it all afternoon. Still new to react.

My code:

import './App.css';
import { Link } from 'react-router-dom';

function Shop() {
    useEffect(() => {
        fetchItems();
    },[]);
    
    const [items, setItems] = useState([]);

    let dataArray = [];
    const fetchItems = async () => {
      const data = await fetch('https://fortnite-api.theapinetwork.com/upcoming/get');
      
      const items = await data.json();
      dataArray = items.data;
      setItems(dataArray.map( x => {return x}));
      console.log(items);
    }
   

  return (
    <div id="App">
      <h1>Upcoming Fortnite Items</h1>
      <div>
        {items.map(x => 
        <Link to={`/shop/${items.itemId}`}>
          <h3 key={items.itemId}>
          {x.item.name} 
          </h3>
          </Link>)}       
      </div>
    </div>
  );
}

export default Shop;

I appreciate the help, thank you.

EDIT:

This is another component handling the component for the other p;age where the item details are supposed to be output: (sorry)

import './App.css';
import { Link } from 'react-router-dom';


function ItemDetail({ match }) {
  /**this puts it into effect */
    useEffect(() => {
        fetchItem();
        console.log(match);
    },[]);
    
    const [item, setItem] = useState([]);

    const fetchItem = async () => {
        const fetchItem = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id={{itemid}}`);
        const item = await fetchItem.json();
    }

  return (
    <div id="App">
      <h1>Item</h1>
    </div>
  );
}

export default ItemDetail;```

Answer

The problem is right here:

return (
    <div id="App">
      <h1>Upcoming Fortnite Items</h1>
      <div>
        {items.map(x => 
        <Link to={`/shop/${items.itemId}`}> // <-------  Here 
          <h3 key={items.itemId}> //<-------- Here
          {x.item.name} 
          </h3>
          </Link>)}       
      </div>
    </div>
  );

You need to get the itemId from each element, right now you are trying to get the value from the actual array, which doesn’t contain any field and therefore is giving you undefined.

The code should look something like this:

return (
    <div id="App">
      <h1>Upcoming Fortnite Items</h1>
      <div>
        {items.map(x => 
        <Link to={`/shop/${x.itemId}`}>
          <h3 key={x.itemId}>
          {x.item.name} 
          </h3>
          </Link>)}       
      </div>
    </div>
  );