React /Redux freecodecamp challenge question

JavaScript
#1

Hi all.
I’m wondering why my solution to the freecodecamp challenge is wrong?
This is my solution , the result is that it appends to the list each time the user clicks the button.


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(){
  const itemsArray = this.state.input.split('');
  if(this.state.messages){
     this.setState({
       messages: [...this.state.messages,itemsArray],
       input: ''
     })
  }else {
     this.setState({
        messages: itemsArray,
        input: ''
     })
  }
  
}
render() {
  return (
    <div>
      <h2>Type in a new Message:</h2>
      <input value={this.state.input} onChange={this.handleChange}/>
      <button onClick={this.submitMessage}>Add message</button>
      <ul>
        { this.state.messages.map(function(item,index) {
             return <li>{item}</li>
        })}
      </ul>
    </div>
  );
}
};

Your browser information:

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

Challenge: Manage State Locally First

Link to the challenge:

Here is the freecodecamp solution: the results with testing this look the same , it appends the new text to the end of the list each time the user clicks the button. So I’m unsure why my code is wrong?

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 here */ }
        <input onChange={this.handleChange.bind(this)} value={this.state.input}/>
        <button onClick={this.submitMessage.bind(this)}>Submit</button>
        <ul>
          {this.state.messages.map((x, i)=>{
            return <li key={i}>{x}</li>
          })}
        </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};
ReactDOM.render(<DisplayMessages/>,document.getElementById("container"));

All the tests pass , except for this one: Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state

Thanks :slight_smile:

#2

I ran your solution without the last line ReactDOM ....
And was successful.

Save your solution, refresh the page, and try again.

1 Like
#3

Strange, it’s not for me . I removed the reactDOM statement , and still the same. Still the same one error: Clicking the Add message button should call the method submitMessage which should add the current input to the messages array in state.

#4

Maybe try on a different browser.

#5

I just now noticed you quoted the freecodecamp code.

With my code it’s still not working. I would just like to know why? The output is the exact same as with the freecodecamp code solution :face_with_raised_eyebrow:

#6

I misunderstood. I have not seen the first part of your question. The comment below is the solution to the problem.

#7

You are not adding a string to the messages array, but a sub-array of characters.
And I’m curious, what’s the reasoning behind splitting the input?

You end up having a messages array that looks like so:

[ ['h','e','l','l','o'] ]

Hope this helps :slight_smile:

1 Like
#8

Thanks, changing this solved it :slightly_smiling_face:

#9