{data?.map((item, index) =>
How does the above line of code check for an empty array before mapping? I am not seeing any references for such. Any body please explain?
what does data? do?
Reference here: https://dev.to/madara/fetching-data-with-react-hooks-and-fetch-api-beginners-guide-2ick
This is a condition, it check if the data exists befor map to avoid returning the error message "data is null" or "data is undefined".
data?.map((item, index) => { ... })
is the same as
data
? data.map((item, index) => { ... })
: null
and the same as
if (data)
data.map((item, index) => { ... })
Adding ternary operator after data (data?) would check first that the data has a value and is not null or undefined, so it can not throw error in that case. It's a short hand for:
data ? data.map((item, index) => {}) : null
If the data has a value, it would execute map on it.
.map()method will just return an empty array in return, and the callback function won't be invoked. Thedata?checks that data isn't nullish (undefined / null) before calling .map() on itdata?is optional chaining, ifdatais null/undefined, the.map()method isn't called at all, and yourdata?.map()evaluates toundefined. If data is empty, then.map()still gets called, but it just returns an empty array (and the callback doesn't get executed).