[React] WARNING in [eslint] Array.prototype.map() expects a return value from arrow function array-callback-return

🍉문제!

Array.prototype.map() 에서 값을 제대로 반환하지 않는 경우 발생한다.

🍉해결!

map() 함수는 배열의 각 요소를 새로운 요소로 반환하기 때문에 각 화살표 함수가 값을 반환해야 한다.

🍉적용!

// Dropdown.js
import React from 'react';

const Dropdown = ({ options, onChange }) => {
  return (
    <select onChange={onChange}>
      {options.map((option) => (
        <option key={option.id} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

export default Dropdown;

나의 코드를 보면 option 객체를 잘 반환 해주고 있다.그런데도 에러가 뜨는 이유는 options 배열의 요소 중 하나가 null 이거나 undefined일 수 있기 때문이다!

🍉그러면 어떻게..?

// Dropdown.js
import React from 'react'

const Dropdown = ({options, onChange}) => {
  return (
    <>
        <select name="dropbox" id="dropbox" onChange={onChange}>
            {options.map((option) => {
                return (
                <option key={option.id} value ={option.value}>
                    {option.label}
                </option>
                )
            })}
        </select>
    </>
  )
}
export default Dropdown;

return 을 잘 선언해주면 해결~~!!