.map()
on an Array Union Typeexport const AddTags = () => {
const [tagList, setTagList] = useState<[] | object[]>([])
return (
//...
tagList.map((tag: any) => (
<TagSmall
key={tag.id}
tagname={tag.name}
onClick={() => handleClick(tag.id)}
/>
))}
//...
)
}
Type error: This expression is not callable.
Each member of the union type '(<U>(callbackfn: (value: never, index: number,
array: never[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: ITag,
index: number, array: ITag[]) => U, thisArg?: any) => U[])' has signatures,
but none of those signatures are compatible with each other.
> 44 | tagList.map((tag: any) => (
| ^
45 | <TagSmall
46 | key={tag.id}
47 | tagname={tag.name}
export const AddTags = () => {
const [tagList, setTagList] = useState<(null | object)[]>([])
return (
//...
tagList.map((tag: any) => (
<TagSmall
key={tag.id}
tagname={tag.name}
onClick={() => handleClick(tag.id)}
/>
))}
//...
)
}
https://duncanleung.com/typescript-array-map-over-union-array-type/
input
비활성화input의 value를 state로 설정해두고, state 값은 api 요청으로 받아온 값을 할당해줄 것이기 때문에 입력기능이 필요없어졌다. 불필요한 커서가 생기는 것이 마음에 안들기 때문에 input 필드를 비활성화 시키는 방법을 찾아보았다.
disabled
속성을 적용하면 input 필드가 비활성화된다.
비활성화 상태가 되면, input 필드를 클릭해도 포커스가 가지 않는다.