React JS is returning undefined when trying to access information from array

Question

I have information stored in a json file that is accessed through axios calls and mock.js and I am able to access my information. This is the data:

information: { 
        name: 'Company name', 
        aboutParagraphs: [
           ["X"],
          ["Y"],
           ["Z"],
         ["XX"]
        ],

When I try accessing the whole array, it returns all items. However, when I try accessing a single array, say information.aboutParagraphs[0], React returns an error TypeError: Cannot read property '0' of undefined.

Here is the code:

<div className="col-lg-6">
<div className="mi-about-content">
    <h3>
      {information.name}
    </h3>
    <p>
  {information.aboutParagraphs[0]}
   </p>
</div>
</div>

I tried checking other solutions but they all seemed to have either a syntax issue or were using the wrong brackets which isn't the case here - as far as I can tell. What am I missing? Is it a syntax issue? Thanks in advance.

are you sure the data you received is formatted as you quoted ? how did you logged this object ? and first of all, try to replace by this : {information?.aboutParagraphs[0]} to prevent displaying a property of an undefined information. About the problem, one of my guess is that this object received something else than an array in the first place, which lead to an error, then the correct format is inserted in your object, hence you see the good results in your logging. — Alex
– Alex, Commented Jul 2, 2020 at 15:54
you can check this by doing : { information && Array.isArray(information.aboutParagraphs) ? information.aboutParagraphs[0][0] : 'there is an issue' } — Alex
– Alex, Commented Jul 2, 2020 at 15:57
This is either an issue with rendering before the fetch is complete or the data structure not being what you think it is. — Grant Singleton
– Grant Singleton, Commented Jul 2, 2020 at 16:17
I don't think it has an issue rendering the information as it logs the arrays and is aware that the type is an array. I also did something similar with another app and that worked fine so I'm really unsure if its a bug or an async issue — Amer
– Amer, Commented Jul 2, 2020 at 16:25
I can't reproduce the issue. You are almost certainly trying to render data before the axios call completes as Alex suggests. Don't forget that logging an object to the console (at least in chrome) gives you a live view of the object, not a snapshot of it at the time the call to console.log happened. — Jared Smith
– Jared Smith, Commented Jul 2, 2020 at 16:27

Grant Singleton · Accepted Answer · 2020-07-02 16:28:50Z

1

Try this:

{information && information.aboutParagraphs && information.aboutParagraphs[0]}

I don't know for sure without seeing your fetch but these issues usually occur when you try to render some data you are getting asynchronously that has not finished.

I realize this is overkill but this will tell you if it is an async issue or not. If it tries to render even an instant before fetch is complete it will be undefined.

What the above line does is check that all 3 of those items exist before it tries to render information.aboutParagraphs[0]

edited Jul 2, 2020 at 16:28

answered Jul 2, 2020 at 15:58

Grant Singleton

1,65110 silver badges17 bronze badges

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

2 Comments

Amer Over a year ago

Adding the line above returned the data as expected, thank you!

Grant Singleton Over a year ago

Glad it worked. This happens a lot when fetching and rendering. It is good practice to throw in some checks like this before rendering data just to be sure it is there.

Collectives™ on Stack Overflow

React JS is returning undefined when trying to access information from array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related