React and Redux: Connect Redux to the Messages App -- presentational component

JavaScript
1

A presentational component’s purpose is to just display UI, and not manage state. So is it just a mistake that this component that manages state is given the name Presentational in the code for this challenge, or am I misunderstanding something?

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() {
    const currentMessage = this.state.input;
    this.setState({
      input: '',
      messages: this.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>
    );
  }
};
2

I can’t say for sure, but I believe this is exactly the reason it the component is renamed. It’s not because it’s a presentational component now, but that it will be when you’ve moved all of the state into Redux.

1 Like