1

I'm a new developer and I need help to display this json data on the website using map function.

This is what json data look like:

JSON data

https://fortnite-api.theapinetwork.com/store/get

and this is what my code looks like right now:

export default function App() {
 
  const [items, setItems] = useState('');

  useEffect(() => {
    const url = 'https://fortnite-api.theapinetwork.com/store/get';

    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        console.log(json.data);
        setItems(json.data);
      } catch (error) {
        console.log('error', error);
      }
    };

    fetchData();
  }, []);

  console.log(items)
  return (
    <div>
      <center>
        <h1>Virtual Fortnite Store</h1>
      </center>
      
      
      
    </div>
  );
}

I want to display all of the item's:

  1. name
  2. image
  3. type
  4. rarity
  5. description

Thank You

Umer Arif
  • 27
  • 5
  • 2
    Does this answer your question? [How to render an array of objects in React?](https://stackoverflow.com/questions/41374572/how-to-render-an-array-of-objects-in-react) – Ramesh Reddy Sep 01 '21 at 03:04
  • Can you please help me to only display all of the items name as an example so I can understand how the map function works because I have tried numerous times but its still not displaying anything. I would be very grateful. – Umer Arif Sep 01 '21 at 03:23
  • 2
    Maybe you can show us how you are using the map function? – Chickenrice Sep 01 '21 at 03:26

1 Answers1

0

This is how I would do it. Iterate the array items with map function and use JSX expression to display the data you want.

The layout is up to you.

return (
    <div class="Map">
      <center>
        {items !== '' ? 
            items.map((item, index)  => {
              return (
                <ol key=`list${index++}`>
                  <li>Name: {item.name}</li>
                  <li>
                    Image: <img src={item.image.icon} alt={item.name} />
                  </li>
                  <li>Type {item.type}</li>
                  <li>Rarity: {item.rarity}</li>
                  <li>Description: {item.description}</li>
                </ol>
              );
            })
          : <h2>Loading...</h2>}
      </center>
    </div>
  );
Tue Nguyen
  • 46
  • 4