Manage State Locally First_ Why is handleChange not defined?

JavaScript
1

Tell us what’s happening:
I don’t know the method for calling the value of the input field. Can you help me?

Your code so far


class DisplayMessages extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      input: '',
      messages: [],
    };

    this.handleChange = this.handleChange.bind(this);
  }

  // add handleChange() and submitMessage() methods here

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

  submitMessage() {
      console.log(handleChange() + this.state.messages ) 
  } ; 

  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
         <input onChange={handleChange()}>{console.log(this.state.input)}                 </input>
         <button onClick={submitMessage()}>Add message </button>
         <ul> console.log({this.state.messages.map()})</ul>
         <li></li>
        
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36.

Link to the challenge:

2

When reference a class object from inside that class object, you have to use this. To access member properties, including member functions, you need to use this.propertyName or this.functionName(), e.g.

Change it to this.handleChange() and you should be okay.

Update: I mean everywhere that you call it, not in the original member function definition.

3

29
29703×1157 86.6 KB

If I change this, the program say that there is an unexpected brace…

4

Did you see my update? this.handleChange() is how you CALL the function. The error you are getting is when you are DEFINING the member function. You don’t need to use this when you are defining the member functions and properties, only when you are accessing them.