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,
  message
}
};

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



const store = Redux.createStore(messageReducer);

// React:

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

const Provider = ReactRedux.Provider;



class AppWrapper extends React.Component
{
render() 
{
  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 https://reactjs.org/docs/error-decoder.html?invariant=143 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