[React.js] Expected an assignment or function call and instead saw an expression 오류 해결법

할당 또는 함수 호출이 예상되나 대신 식이 표시되었다는 의미의 오류이다.

 

MDN JavaScript 화살표함수에 따르면

화살표 함수의 몸체에서 괄호로 감싸지지 않았거나 소괄호()로 감싸진 부분은 return문이 없어도 return 값을 반환한다.

반면, 중괄호{}로 감싸진 부분은 return문이 없으면 return 값을 반환하지 않는다.

 

따라서 다음의 경우 아래와 같이 수정할 수 있다.

arr.map((item, index) => {<button key={index}>{item}</button>})

 

1. 중괄호를 제거한다. (가장 간단함)

arr.map((item, index) => <button key={index}>{item}</button>)

 

2. 중괄호 대신 소괄호를 사용한다.

arr.map((item, index) => (<button key={index}>{item}</button>))

 

3. return문을 추가한다.

arr.map((item, index) => {return (<button key={index}>{item}</button>))}