React/Redux Challenges: Manage State Locally First

JavaScript
1

Tell us what’s happening:
None of the tests are passing. So i think the code isnt even exectuting? Whats going on? What am i missing?

Your code so far


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

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input type="text" onChange={this.handleChange} value={this.state.input} />
        <button type="button" onClick={this.submitMessage}>Add Message</button>
        <ul>
        {
          this.state.messages.map( (msg) => {
            return (<li>msg</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/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react-and-redux/manage-state-locally-first

2

You have a couple of syntax errors. The first one will not throw an error - you have an extra curly brace:

  this.state.messages.map( (msg) => {
            return (<li>msg</li>);
          });
          } << here

The output below your code should show you the rest.

3

Im still getting no output at all. I miss spoke in my original post. What i meant by ‘none of the tests are passing’ was im getting zero output.

4

You won’t see output until you remove the extra curly brace that is within your UL element. Also, there will be an issue with your submitMessage function. Messages will return undefined, you have to reference state.

1 Like