Uncaught runtime errors: Cannot read properties of undefined (reading 'map')

 

이런 에러가 나서 구글링을 했는데 어떤 천사분께서 너무 명쾌하게 답을 적어 두셨다.

 

❓map이 reading할게 없다고 화를 내는 중이다.

 

수정 전 코드

export default function LetterList({ letters, text, onDeleted, onEdit }) {
  return (
    <Section>
      <SectionTitle>{text}</SectionTitle>
      <SectionUl>
        <SectionLi>
          {letters.map((letter) => (
            <LetterItem
              key={letter.id}
              letter={letter}
              onDeleted={onDeleted}
              onEdit={onEdit}
            />
          ))}
        </SectionLi>
      </SectionUl>
    </Section>
  );
}

 

 

 

수정 후 코드

export default function LetterList({ letters, text, onDeleted, onEdit }) {
  return (
    <Section>
      <SectionTitle>{text}</SectionTitle>
      <SectionUl>
        <SectionLi>
          {letters?.map((letter) => (
            <LetterItem
              key={letter.id}
              letter={letter}
              onDeleted={onDeleted}
              onEdit={onEdit}
            />
          ))}
        </SectionLi>
      </SectionUl>
    </Section>
  );
}

 

💡letters?.map으로 바꿔주면 letter가 있을때 map을 할 것이기 때문에!! 에러가 사라진다!