Cannot read properties of undefined (reading 'map') mapping issue when array is empty

Question

i have the following code here where i map data using map funtion the issue is that when

arrays are empty i get the flowing error

Cannot read properties of undefined (reading 'map')

i dont want error to occur

const Row = ([date, item], index) => { return ( <tr className="gradiantblur" key={date || index}> <td style={styles.tdFirst}>{date}</td> {columns.map((each, i) => ( <td key={i} style={styles.td}> {item.data && item.data[each] && item.data[each].map((itemByModule, id) => ( <span key={id}> {itemByModule.submodule} <br /> </span> ))} </td> ))} <td style={styles.td}> {item.customs && item.customs.map((each, i) => ( <span key={i}> {each.activity} <br /> </span> ))} </td> </tr> ); }; return ( <table style={{ width: "100%", borderCollapse: "collapse" }}> <thead style={{ borderBottom: "5px solid #5c0048" }}> <tr className="gradiantblur"> <th style={styles.th}>Dates</th> {columns.map((each) => ( <th style={styles.th} key={each}> {each} </th> ))} <th style={styles.th}>Custom</th> </tr> </thead> <tbody>{Object.entries(data).map(Row)}</tbody> </table> ); }

show me some method where the ui displayes with out ging the error when there is no data

On which line do you get the error? Where columns are defined? — Bar
– Bar, Commented Mar 25, 2022 at 10:53

Erfan · Accepted Answer · 2022-03-25 11:15:35Z

First thing to understand is that an empty array ([]) is not equal to undefined.

An empty array has all methods of arrays, while undefined doesn't.

There are a few ways to to get around the problem:

doing a columns && columns.map(..., shows nothing whenever your array is undefined, but maps through it whenever it is an array.
doing a columns ? columns.map(... : <div>no Data</div>, maps through array if it is truthy, otherwise shows other elements.
doing a (columns ?? []).map(..., always maps through an array, but actually first checks if columns is undefined, if it is, replaces it with an empty array.

TheTisiboth · Accepted Answer · 2022-03-25 11:20:06Z

Your columns is first undefined (before you set it with an other value). Instead of that, you should set it as an empty array initialy, like this:

const [columnns, setColumns] = useState([])

This way it will not be undefined

Collectives™ on Stack Overflow

Cannot read properties of undefined (reading 'map') mapping issue when array is empty

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related