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

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;

Solution 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>

Solution 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.

Solution 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>

Comments

[Benji Durden]

Appreciate the help! Still getting the same error though :(

[Przemysław Zalewski]

Do the issue only occur when rendering the Score component? I assume you commented it out and the error disappeared. If not, please check other components and render functions like this.renderResult(). Is there anything helpful in the stack trace?

[Benji Durden]

I'm able to render all of the components just fine, except for the Score component (final one.) Just out of curiosity, I changed the component order in my App.js and moved the second to last one to the position of Score and I'm still getting the same error. I think it might have to do with how the App.js is set up, because this line is highlighted in the error message codeReactDOM.render(<App />, document.getElementById('root'));code

[Przemysław Zalewski]

Please just delete <Score> for now and re-run the test and see what happens. I think the root issue is somewhere else, like in some third-party component which expects only one child or in renderResult or renderTest methods.

[Benji Durden]

when you meant test, did you mean to run the app locally and post the messages in my devtools? and should i be use redbox-react or something to catch the error? Sorry I'm kinda new to all this, haha

[Przemysław Zalewski]

Just launch it like you did before and see if the error is still there after removing <Score> component from rendering in <App> :) Don't use those as handling errors is a pain in the ass in React even with redbox-react as there is no proper error isolation yet.

[Benji Durden]

The error no longer exists after removing that component.

[Przemysław Zalewski]

That is very strange... please check if this works when you change contents of the transition group: <div key="transition-group-content" >Test</div>. If your Score component differs by any means from that what you have posted, please show the full source. Please note that CSSTransitionGroup is for animating dynamic components which enter or leave the tree, for simple animations use pure CSS, for example animate.css: <div class="animated bounce" >You prefer <strong>{props.testScore}</strong>!</div> without the CSSTransitionGroup.

[Benji Durden]

think i should remove that component and just use animate.css?

[Przemysław Zalewski]

For your use case, I think animating with CSS is a better approach. Note that props.testScore is undefined in the Score component unless you pass it as a prop <Score testScore={5} />. As I dig in the source the only thing that comes to my mind is to wrap your content twice: <div key="transition-group-content" ><div>You prefer <strong>{props.testScore}</strong>!</div></div> as the source of the error is this: return React.cloneElement(React.Children.only(this.props.children), props); in github.com/reactjs/react-transition-group/blob/master/src/…

[Benji Durden]

thanks a lot man! really appreciate the advice regardless. how'd you learn so much about react?

[Przemysław Zalewski]

By doing things :) Just practice, you will encounter many issues and learn from them. I wish you good luck in your React adventure!

[Luca Kiebel]

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[Sonic.S.Xiang]

@LucaKiebel, thanks for you suggestion, I have update my post.