How to access nested json object in tsx file?

info.data.drives[1] might be undefined at some point when the component renders. If info.data.drives[1] is undefined, trying to access .isActive directly without checking if drives[1] exists first will result in an error. This is why the optional chaining operator ?. is useful - it safely checks if the value exists before attempting to access a property.

The reason why removing the optional operator raises an Error should not be that hard to spot.

TypeScript does not know in advance if an arbitrary List | Array (eg: info.data.drives) is empty or not - or even defined. There is really no guarantee that it could not potentially be [ ] or even undefined.

And yet, we are still confident enough to ask it to extract a value from a List, which may or may not even contain anything?🤔 Actually TypeScript is helping out by throwing an Error to indicate that the array might be empty or even undefined or rather Nullish.

Since there is no complex computation required in this particular Code, you may also move it to a One-Liner Function - "if your are not so comfortable looking at those Question Marks (?)". Something along these Lines:

const imgClass = (info: InfoType): string => (
    info?.data?.drives[1]?.isActive ? 'd-none' : ''
); // even add the optional (?) to others if unsure too

And then use it like so:

<img id="inactive-drive2" 
     src='/src/assets/image/InActiveDrive.png' 
     className={imgClass(info)} />