React.js - How to get access to a specific value from an array of objects

Question

Well, let's go in parts ... I'm trying to consume the data from the Medium API. The problem is that I can't get specific JSON values to display in my component.

I need:

title
link
image (thumbnail)

From each post of the specific medium. API example:
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mikaeriohana

My code is here:

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

function App() {

  const [mediumData, setMediumData] = useState([]);

  const getData = async () => {
    const res = await axios.get(
      "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@mikaeriohana"
    );
    setMediumData(res.data.items);
  };

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

  return (
    <div className="App">
      <h1>Tile 01: </h1>
      <p>Link 01: </p>
      <img src="" alt="img"/>
    </div>
  );

}

export default App;

I can with the map () function get all the data at once, but I only need the data from the first post.

When I try to specify the values the following error returns:

{console.log(mediumData.link)}
<h1>Tile 01: {mediumData[0].title}</h1>
<p>Link 01: </p>

My mistakes are always:

undefined

or

TypeError: Cannot read property 'title' of undefined

@drigols Can you please add console log of 'mediumData'? By seeing output of mediumData once can easily find the error. Your mentioned error signifies there is no element at zeroth index. — Vipul Patil
– Vipul Patil, Commented Aug 27, 2020 at 15:57
You have to wait for the data to be fetched and mediumData to be set. You can use something like if (!mediumData || !mediumData.length) { return ''; } — Titus
– Titus, Commented Aug 27, 2020 at 15:58

Todd Skelton · Accepted Answer · 2020-08-27 16:40:00Z

2

Your data isn't available immediately. You are asynchronously grabbing it, so you need to have your component be able to handle the case when there is nothing there.

<h1>Tile 01: {mediumData[0]?.title || ""}</h1>
<p>Link 01: </p>

I'm just using a the optional chaining operator ?. This checks to make sure there is a value to access.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

mediumData[0]?.title || "" means give me the title if mediumData[0] exists and title exists or just return an empty string "".

While the data is fetching, this is populating the title with an empty string. Once the title is available, the component updates and the title shows up.

edited Aug 27, 2020 at 16:40

answered Aug 27, 2020 at 15:58

Todd Skelton

7,2893 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

drigols Over a year ago

Incredible ... Works the way I wanted. This syntax what should I study to understand? It is no use just copying the code, in the future I also need to understand what is happening. Still, thank you.

Boussadjra Brahim · Accepted Answer · 2020-08-27 15:58:33Z

1

For the first rendering the array is empty so you should check if has a value :

   <div className="App">
      { mediumData[0] && <><h1>Tile 01: {mediumData[0].title} </h1>
      <p>Link 01: {mediumData[0].link}</p>
      <img src="" alt="img"/>
         </> 
       }
    </div>

answered Aug 27, 2020 at 15:58

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

2 Comments

drigols Over a year ago

Incredible ... Works the way I wanted. This syntax what should I study to understand? It is no use just copying the code, in the future I also need to understand what is happening. Still, thank you.

Boussadjra Brahim Over a year ago

Yes you should understand how do the hooks or the life cycle work

Collectives™ on Stack Overflow

React.js - How to get access to a specific value from an array of objects

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related