문제 상황
ingredients 배열에 항목이 잘 담긴 걸 확인했고
ingredients 배열의 map 메소드를 실행해서 콘솔에 로그를 찍을 땐 항목이 이렇게 잘 나오는 걸 확인했는데
이렇게 jsx 형식으로 화면에 띄울 요소를 만들면 undefined라고 나온다.
원인
🍸
return을 안 했기 때문이었다!! 🤪 (머쓱..)
console.log()도 한 줄인데 잘 출력되니 역시 한 줄인 <h1>{ingredients}</h1> 그냥 적으면 출력될 줄 알았다. 리턴할 코드가 한 줄일 때 자꾸 return 문을 빼 먹는다.
결론
💡 리턴문이 한 줄일 때도 return 하는 것 잊지 말자!
✨