[ERROR] 'getOptionLabel' method error ... on Material-ui 'Autocomplete' component

ERROR ❌

MUI: The getOptionLabel method of Autocomplete returned object ([object Object]) instead of a string for {"basDt":"20221110","srtnCd":"A441270","isinCd":"KR7441270006","mrktCtg":"KOSDAQ","itmsNm":"파인엠텍","crno":"1341110618279","corpNm":"(주)파인엠텍"}

🤷‍♂️?

MUI 의 Autocomplete 컴포넌트를 이용해 dropbox 를 만들려고 했다.

options 에도 받아온 데이터를 잘 넣어줬는데 왜지?

getOptionLabel 은 공식문서에 안 나와있던데 뭘까

공식문서를 찾아보면

이라고

Used to determine the string value for a given option. It's used to fill the input (and the list box options if renderOption is not provided).
If used in free solo mode, it must accept both the type of the options and a string.
Signature:
function(option: T) => string

적혀있다.

Solution ✅

무슨 말인지 모르기 때문에 getOptionLabel = {(option) => option.label || option} 라고 적어줬다.

당연히 안 되고, 찾아보니

getOptionLabel = {(option) => option.label || ""}

라고 적어주란다.

결론은

<Autocomplete
    ...

    getOptionLabel={(option)=> option.itmsNm || ""}

    ...
/>

이렇게 적어주니

잘 나온다.

끝

세상엔 똑똑한 사람들이 많다.

행복한 세상이다.

참고: stackoverflow