오류 | map 함수 1 (ft. react)

구문에러 : 콘솔창에 에러메시지가 나오지 않는다.

 

❓상황

map 함수 사용하여 배열안의 요소들을 컴포넌트로 반환하고자 할 때, 반환이 안되는 현상

 

🔎 원인 파악

map 함수에서 return 될 값을 무엇인지 작성해주지 않아서 발생한 문제

// 문제의 코드
const UserList = ({ users }) => {
  
  return (
    <ul>
      {users.map((user, idx) => {
        <li key={idx}>
          {user.name} ({user.age} years old)
        </li>;
      })}
    </ul>
  );
};

 

✨ 해결 방법

return 문 생략

# 생략 버전
import React from "react";

const UserList = ({ users }) => {
  
  return (
    <ul>
      {users.map((user, idx) => (
        <li key={idx}>
          {user.name} ({user.age} years old)
        </li>
      ))}
    </ul>
  );
};

export default UserList;

 

return 문 작성

# 생략없는 버전
import React from "react";

const UserList = ({ users }) => {
  
  return (
    <ul>
      {users.map((user, idx) => {
        return (
          <li key={idx}>
            {user.name} ({user.age} years old)
          </li>
        )
      })}
    </ul>
  );
};

export default UserList;