이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다.

💡문제

아래의 코드에서 반복되는 코드를 줄여 map으로 돌리려고 하자 에러가 나타났다.

    <HotVoteContainer>
      <Tabs>
        <Tab
          className={clicked === '전체' ? 'clicked' : ''}
          onClick={onClick}
          >전체</Tab>
        <Tab
          className={clicked === '맛집추천' ? 'clicked' : ''}
          onClick={onClick}
        >맛집추천</Tab>
        <Tab
          className={clicked === '생활' ? 'clicked' : ''}
          onClick={onClick}
        >생활</Tab>
      </Tabs>
    </HotVoteContainer>

이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다.

💪🏻 해결

처음에는 Container 밑에서 바로 map을 돌리려고 했으나, 하나의 자식이 필요하다고 했으므로 Tabs안에서 map을 돌려주었다.

const category = ['전체', '일반', '음식', '쇼핑', '패션뷰티', '반려동물', '취미운동'];

<style.Tabs>
    {category.map((ele)=>{
      return(<style.Tab
      className={clicked === `${ele}` ? 'clicked' : ''}
      onClick={onClick}
      >{ele}</style.Tab>)
    })}
</style.Tabs>