DisplayMessages React curriculum works but does not pass the tests

JavaScript
1

Hi, I am trying to learn the React-Redux part of the curriculum. The second part of the program is the ToDo list. My code executes correctly but is not passing the tests. What am I missing? Thanks for your help. My code is pasted below and the link is https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first/


class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      flg:"N",
      messages: []
    };
       this.handleChange = this.handleChange.bind(this);
        this.submitMessage = this.submitMessage.bind(this); 
  }
  displayMessages()
  {
    
        if(this.state.flg==="Y")
         {
                var objul=document.getElementsByTagName("ul")[0];
                 var objli;
                 var msgs = this.state.messages;
                objli = document.createElement("li");
                objli.innerHTML=msgs[msgs.length-1];
                objul.appendChild(objli);
   
         }  
  }
  handleChange(txt)
  {
           var text = document.getElementsByName("inputmsg")[0].value;
           this.setState({input:text,flg:"N"});
  }

  submitMessage(evt)
  {
           var msgs = this.state.messages;
          var newmsg = this.state.input;
         document.getElementsByName("inputmsg")[0].value="";
         msgs.push(newmsg);
          this.setState({input:"",messages:msgs,flg:"Y"});
  }
  // add handleChange() and submitMessage() methods here

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input type='text' name="inputmsg"  value={this.state.input} onChange={this.handleChange}/>
          <button value="submit" onClick={this.submitMessage}>
          Add Message
          </button>

          <ul>
      {
          this.displayMessages()
       }
           </ul>
        { /* change code above this line */ }
      </div>
    );
  }
};
2

You will need to format your code correctly so that we can help you. It’s hard to read and some of your code is being rendered.

Select your code and hit preformatted text in the editor.

3

Thanks @shimphillip I have now formatted the code. Any pointers? Thanks.

4

Think of this exercise in simpler terms. Go head and reset your code.

You won’t need flg in your state. handleChange will only set state input from the input element.
You don’t need displayMessages function as well.

Looks like you are getting confused with how react functions. I would go back to react section and redo the exercises to be familiar.

5

Thanks @shimphillip, I guess my old habits of javascript coding resurfaced :slight_smile: of course react will render the code and so I don’t need a function to display messages. I will reset and restart the code.

6