Dispatch submitNewMessage() from this.props in submitMessage()?

I don’t understand how to do what it says here:

In the Presentational component, first, remove the messages property in the local state. These messages will be managed by Redux. Next, modify the submitMessage() method so that it dispatches submitNewMessage() from this.props, and pass in the current message input from local state as an argument. Because you removed messages from local state, remove the messages property from the call to this.setState() here as well. Finally, modify the render() method so that it maps over the messages received from props rather than state.

specifically where it says to “modify the submitMessage() method so that it dispatches submitNewMessage() from this.props, and pass in the current message input from local state as an argument”.

Any help is appreciated. Thanks in advance.

My 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: ''
  }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
submitMessage() {
  this.setState((state) => ({
    input: '',
    dispatch(this.props.submitNewMessage(state.messages)
  }));
  
}
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>
  );
}
};
// 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/84.0.4147.135 Safari/537.36 Edg/84.0.522.63.

Challenge: Extract Local State into Redux

Link to the challenge: