React js shows error while showing object

Question

I got an error when i go to console.log this object...in reactjs

Json object {"title":"Rtv","length":-1,"params":{"tvg-logo":"https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Rtv_bangladesh.PNG/120px-Rtv_bangladesh.PNG","group-title":"America"},"file":"https://example.m3u8"}

Error:

TypeError: Cannot read property 'tvg-logo' of undefined

(anonymous function)

src/App.js:88

85 | 86 | return ( 87 | items.map((data,key)=>{

88 | console.log(data['params']['tvg-logo']) | ^ 89 | const {title,params} = data; 90 | return( 91 | View compiled

i already declare this object but params have an another object name tvg-logo this tvg-logo object shows type error — Fahad Ali, Jun 13 '21 at 07:07
What does `console.log(data)` show? Are you sure that all item objects in the `items` array has the `params` key defined? — j1mbl3s, Jun 13 '21 at 07:34
@FahadAli, this can happen when the data fetch after the component mounts. So when the console.log runs initially, that data params are not set. [Optional Chaining](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) is best for scenarios like this. — Yushan, Jun 13 '21 at 07:36

score 1 · Accepted Answer · answered Jun 13 '21 at 10:08

It is difficult to see why the error is occurring in the small piece of code you have provided but to avoid this error you can use the conditional chaining discussed above; see example below.

console.log(data?.params?.tvg-logo)

This will return nothing if it fails anywhere along the object path.

React js shows error while showing object

1 Answers1