(SOLVED) Manage State Locally First Issue

Tell us what’s happening:
The code below functions entirely but isn’t passing the checks. Returns the error: Cannot read property ‘target’ of undefined

Your code so far

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

  submitMessage() {
      messages: this.state.messages.concat(this.state.input),
      input: ''

  render() {
    const allMessages = this.state.messages.map(function(element) {
      return (<li key={element}>{element}</li>)
    return (
        <h2>Type in a new Message:</h2>
        { /* render an input, button, and ul here */ }
        <input value={this.state.input} onChange={this.handleChange}/>
        <button onClick={this.submitMessage}>Add message</button>
        { /* change code above this line */ }

Your browser information:

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

Link to the challenge:

Event handlers should always use the event object passed into the function. Your handleChange does not have a parameter representing the event object passed to it. You are accessing the global window.event which in this particular case is the only event, but that may not always be the case. It is considered a “best practice” to always use the event object which gets passed to the event handler.

1 Like

Aha. Simply overlooked giving the argument event to handleChange.

As always thank you :slight_smile: