React and Redux - Manage State Locally First

JavaScript
1

Tell us what’s happening:

My code seems to be running fine but I can’t seem to get past challenge 2. The messages says => ’ The DisplayMessages component should render a div containing an h2 element, a button element, a ul element, and li elements as children.'<=
but I have done precisely that or is it because I’m missing out something?
I need help.

Your code so far

class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
  }
  // Add handleChange() and submitMessage() methods here
  handleChange(event) {
    this.setState ({
      input: event.target.value,
      messages: this.state.messages
    });
  };

  submitMessage() {
    this.setState({
      input: '',
      messages: [...this.state.messages, this.state.input]
    });
  };

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* Render an input, button, and ul below this line */ }
<input value={this.state.input} onChange={this.handleChange.bind(this)} />
<button onClick={this.submitMessage.bind(this)} >Add message</button>
<div>{this.state.input}</div>
<ul>{this.state.messages.map(item => {
  return <li>{item}</li>
})}</ul>
        { /* Change code above this line */ }
      </div>
    );
  }
};

Your browser information:

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

Challenge Information:

React and Redux - Manage State Locally First

2

Did the instructions ask for this element? What happens if you leave it out?

1 Like
3

No, this part helps me see if handleChanging method is working correctly

4

It is also making your code fail, so you don’t really have an option.

You do not need that anyway. If typing into the input shows the typed text then its value is bound and updated correctly.

1 Like
5

its not working even I remove that line of code

6

Then maybe you change something else because your code passes for me if I remove that line of code.

That or your browser is causing issues. You can copy the code and reset the challenge, then try again.

1 Like
7

no, it was my mistake the code worked
Thanks

8

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