React & Redux Controlled Form works but wont pass tests

JavaScript
1

Tell us what’s happening:
The code works for what the test is asking. It renders an ul of each item in the messages array, but for some reason it is not passing the tests.

I’ve changed the submit button to the same text the test says to use and double checked my spelling of the submitMessage method, and I can’t find why it’s not passing.

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

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

submitMessage(){
  this.setState({
    messages: [...this.state.messages,this.state.input], 
    input: ''});
  event.preventDefault();
  
};
  
render() {
  const messageItems = this.state.messages.map(message => <li>{message}</li>)
  return (

    <div>
      <h2>Type in a new Message:</h2>
      <input 
        onChange = {this.handleChange} 
        value = {this.state.input} />
      <button 
        onClick = {this.submitMessage}>Add message
      </button>
      <ul>
      {messageItems}
      </ul>
    </div>
  );
}
};

Your browser information:

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

Challenge: Manage State Locally First

Link to the challenge:

2

In submitMessage why did you call event.preventDefault() ? you wanted to do this because you wanted to prevent default action of a page refresh.

the way youve written that submit function. you dont have access to it. remove that line and it passes.

Or if you want you need to pass it as the argument parameter in the function definition. Otherwise the function wont know what it is.

1 Like
3

I just thought that was something you were supposed to add if you didn’t want the entire page refreshing.

Thank you for your quick answer.

4

When should I use the preventDefault()? It doesn’t seem to make a difference in this case.

5

when you wish to prevent the default action of a certain thing… in your case… in order to prevent the page from refreshing when a form is submitted you would call the preventDefault method on the event object

It doesn’t seem to make a difference in this case.

The challenge doesnt ask for it specifically. However if you want you can use it, just pass it to the function definition like so:

submitMessage(event){
//now you can reference this object if you desire 
console.log(event)
}

does this make sense?

1 Like
6

some other details that might help:
A form submission is when you might want to send some data to a server… its not in the same location as the app (which is with the client). the default action of most browsers is to refresh the page in order to do this. however you have react … maybe you want to intervene… let react handle it instead, maybe not send this data right away/send it at a later time… who knows what you might want to do… but thats what its for. I hope that makes sense.

1 Like
7

I think I’m starting to understand. I think this is hard to wrap my head around because I don’t know how it works in a real world application. I feel like once I start actually building something and am able to tinker with things a bit more it will make more sense.