Extract Local State into Redux - part Deux

JavaScript
1

Just about finished with this React-Redux section. I’m going over this section again but I seem to be stuck on this challenge where it won’t pass the last two tests. Unfortunately this is all a bit nebulous to me at this point. I’ll get through it, but a little help here would be nice.

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(dispatch) {
    this.setState({
      input: '',
      //messages: this.state.messages.concat(this.state.input)
    });
     return {
      message: function(newMessage) {
        dispatch(submitNewMessage(newMessage));
      }
    }
  }
  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.props.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/68.0.3440.106 Safari/537.36.

Link to the challenge:

2

You just need to fix your submitMessage function.

There is no need to dispatch here. It’s already been taken care of.

You want to call submitNewMessage with parameter input from your state. Then, make your input equal to empty string in your state.

If you are still stuck, you can take a look at below solution.

submitMessage() {
this.props.submitNewMessage(this.state.input);
this.setState({
input: ‘’
});
}

3

Yeah, that seemed to do the trick. Thanks. I knew the problem lay in the submitMessage() method, I just wasn’t sure where.