错误 React.Children.only 期望接收单个 React 元素子元素

Question

Not entirely sure what went wrong in my app here. I'm using create-react-app, and I'm trying to render all of my components into the respective root div. Problem is, I'm able to render all of the components onto the page except the very last one, the Score component. I've even tried throwing that component into a div and I'm still getting the following issue:

'React.Children.only expected to receive a single React element child'.

What exactly does this mean?

Here's my App.js structure.

render() {
   return (
       <div className="App">
           <div className="App-header">
              <h2>BAO BAO BAO</h2>
           </div>
           {this.state.result ? this.renderResult() : this.renderTest()}
           <Baoquestion />
           <AnswerChoices />
           <BaoScore />
           <Score />
       </div>      
    );
}


export default App;

Content of Score.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

 function Score(props) {

 return (
 <div>
 <CSSTransitionGroup 
  className="container result"
  transitionName="test"
  transitionEnterTimeout={500}
  transitionLeaveTimeout={300}>
 >
  <div>
    You prefer <strong>{props.testScore}</strong>!
  </div>
</CSSTransitionGroup>
</div>
);

 }

 Score.propTypes = {
 quizResult: PropTypes.string,
 };

 export default Score;

Answer 1

From react-transition-group documentation :

You must provide the key attribute for all children of CSSTransitionGroup, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.

Please then add a key, even a static one, for the component you render inside the transition group:

<CSSTransitionGroup 
 className="container result"
 transitionName="test"
 transitionEnterTimeout={500}
 transitionLeaveTimeout={300}>
>
  <div key="transition-group-content" >
    You prefer <strong>{props.testScore}</strong>!
  </div>
</CSSTransitionGroup>

Answer 2

<CSSTransitionGroup 
 className="container result"
 transitionName="test"
 transitionEnterTimeout={500}
 transitionLeaveTimeout={300}>
>                            ^ ** Must be a typo here **
^ ** Remove this '>' typo solve my problem **

The root cause of this error 'Error React.Children.only expected to receive a single React element child' is that there are two '>' in the ending of the JSX code. Remove one of the '>' solved this issue.

Answer 3

I had the same error using CSS Transitions. What worked for me is to use these React tags: <></> to wrap around the tags inside the css transition tags.

Notice I have two tags inside TransitionGroup and CSSTransition tags like so:

 <TransitionGroup>
       <CSSTransition key={quotesArr[active]}>
          <>
            <p>{current.quote}</p>
            <h2>{current.client}</h2>
          </>
       </CSSTransition>
  </TransitionGroup>