Error: React.Children.only expected to receive a single React element child.
위 에러의 원인은 react는 하나의 child element만 받기를 원하는데
태그 내 element가 두 개 이상일 경우 다음과 같은 에러가 생긴다.
나같은 경우는 CSSTransition 태그 안에 여러 개의 태그를 넣어서 생기는 문제였다.
div로 묶어 하나의 child로 만들었더니 해결되었다.
공백이 원인인 이유도 있으니 주의해야겠다.
에러코드
<CSSTransition in={showQst} timeout={300} classNames="alert" unmountOnExit onEnter={() => setShowQst(false)} onExited={() => setShowQst(true)} > <div class = "question-text"> {qstDataSet[data].question} </div> <SelectBtn>...</SelectBtn> <SelectBtn>...</SelectBtn> </CSSTransition>
에러 해결
<CSSTransition in={showQst} timeout={300} classNames="alert" unmountOnExit onEnter={() => setShowQst(false)} onExited={() => setShowQst(true)} > <div> <div class = "question-text"> {qstDataSet[data].question} </div> <SelectBtn>...</SelectBtn> <SelectBtn>...</SelectBtn> </div> </CSSTransition>