React and Redux - Manage State Locally First

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

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)
  }

this.handleChange(event) {
  this.setState({
    input: event.target.value
  });
}

  // Add handleChange() and submitMessage() methods here

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }
        <input  />
        <button></button>
        <ul><li></li></ul>
        { /* Change code above this line */ }
      </div>
    );
  }
};

Your browser information:

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

Challenge: React and Redux - Manage State Locally First

Link to the challenge:

2

first of all add the submitMessage() method below the handleChange(event) with the suggested work after that add handleChange method on the onChange attribute in the input element and also add the input(on the local atate) on the value attribute in the input element.
in the openning button element add submitMessage method on onClick attribute ,and do not forget to add the text submit between the openning and closing tags.in the ul element add curly braces({}) and inside use map method to iterate over the messages array and put inside the list element.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.