JSON data returns undefined

Question

In my react app, I'm doing a simple console log of JSON data that is coming from the back end of the application I am working on.

When I console log the main body of the data

console.log('........section2', options2ndSection[2]);

The following JSON data is returned:

Object
     item:
     id: 401
     img: "/static/media/A_F1A.05ecb02c.svg"
     label: "ceramic mug"
     __proto__: Object

I've created a conditional so that I can display information if the label matches a certain string:

const jsonData = optionsSecondSection[2]

                {options2ndSection[2].label === 'ceramic mug' && (
                  <div className={style.informationText}>
                    {i18next.t('section.title.information_text')}
                  </div>
                )}

However, each time I load the page, the variable returns undefined even though the label matches the expected string. I would expect that if it didn't find the string, it wouldn't cause the entire app to crash. Any thoughts? Thanks in advance for any answers.

Answer 1

You are console logging optionsSecondSection[2] and you are running your condition for optionsSecondSection[1] .

I you do not want your app to crash you need to check if your jsonData or optionsSecondSection[2] is available or not. Do something like this:

{options2ndSection[2] ? <div>
               options2ndSection[2].label === 'ceramic mug' && (
              <div className={style.informationText}>
                {i18next.t('section.title.information_text')}
              </div>
            ) 
            </div> :
            <div>'NA'</div>}