Single space causing all tests to fail

Tell us what’s happening:
Describe your issue in detail here.

Why does this fail ALL tests:

<Provider store={store}> 
        <DisplayMessages /> </Provider>

But this passes ALL tests:

<Provider store={store}> 
        <DisplayMessages /></Provider>

That single space. Is there any reason for this single space to cause all tests to fail?
I’m trying to not look at the answers so I can learn better. This was quite frustrating…

  **Your code so far**

// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
return {
  type: ADD,

const messageReducer = (state = [], action) => {
switch (action.type) {
  case ADD:
    return [
    return state;

const store = Redux.createStore(messageReducer);

// React:

class DisplayMessages extends React.Component {
constructor(props) {
  this.state = {
    input: '',
    messages: []
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
handleChange(event) {
submitMessage() {  
  this.setState((state) => {
    const currentMessage = state.input;
    return {
      input: '',
      messages: state.messages.concat(currentMessage)
render() {
  return (
      <h2>Type in a new Message:</h2>
      <button onClick={this.submitMessage}>Submit</button>
        { (message, idx) => {
            return (
               <li key={idx}>{message}</li>

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component
  return (
      <Provider store={store}> 
        <DisplayMessages />  </Provider>
// change code above this line

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Challenge: Use Provider to Connect Redux to React

Link to the challenge:

Are you seeing an error message in the console below the editor? Because I am:

“Invariant Violation: Minified React error #143; visit for the full message or use the non-minified dev environment for full errors and additional helpful warnings.”

And if you go to that URL you get:

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

So this seems to be something with React, JSX specifically, and not an issue with the FCC tests. I’m not a JSX expert so I can’t give you an explanation for why those extra spaces are causing a problem. But I’m guessing most people would put </Provider> on a completely separate line and thus would avoid this issue completely.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.