Minor bug with feedback

Tell us what’s happening:
Describe your issue in detail here.
minor “bug”, the feedback if you still initialize messages within React State is that you must initialize input: ‘’.

It’s just confusing to be told you need to include something that is already included, when it in fact wants something else removed.

  **Your code so far**

// Redux:
const ADD = 'ADD';

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

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

const store = Redux.createStore(messageReducer);

// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line
class Presentational 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() {
  // console.log('b',this.props.submitNewMessage,this.props) // check b4
  this.props.submitNewMessage(this.state.input) // send (dispatch) to redux store
  // console.log('a',this.state)  // check after

  // still need to empty input
  this.setState(() => ({input:''}))

  // old react only version
  // this.setState((state) => ({
  //   input: '',
  //   messages: state.messages.concat(state.input)
  // }));
}
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>
        {//console.log(this.props.messages)
        }
        {
          this.props.messages.map( (message, idx) => {
            return (
               <li key={idx}>{message}</li>
            )
          })
        } 
      
      {  // comments need {} and last must be on new line?
        // react version:
      //  {this.state.messages.map( (message, idx) => {
      //       return (
      //          <li key={idx}>{message}</li>
      //       )
      //     })
      //   }
      // 
      }
      </ul>
    </div>
  );
}
};
// Change code above this line

const mapStateToProps = (state) => {
return {messages: state}
};

const mapDispatchToProps = (dispatch) => {
return {
  submitNewMessage: (message) => {
    dispatch(addMessage(message))
  }
}
};

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
render() {
  return (
    <Provider store={store}>
      <Container/>
    </Provider>
  );
}
};
  **Your browser information:**

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

Challenge: Extract Local State into Redux

Link to the challenge:

By telling you what it should contain, it is also telling you what it shouldn’t contain.

At least that way it covers all possibilities, i.e. you changing input, or adding another property, or not removing the messages property as asked for.

1 Like