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

2

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.

answered Mar 25, 2022 at 11:15

Erfan

1,8121 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

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

2

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

answered Mar 25, 2022 at 11:20

TheTisiboth

1,7011 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related