Coded solution has same functionality as the answer solution, yet throws errors

JavaScript
1

Tell us what’s happening:
I feel like I followed instructions and went back and forth assessing my own code against the answer solution trying to figure out why my code is throwing errors.
It has the same functionality, just written differently.

Any help would be greatly appreciated!

Your code so far


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);
}
// add handleChange() and submitMessage() methods here
handleChange(event){
  const{name, value} = event.target;
  this.setState({[name]:value});
  //console.log(value);
}

submitMessage(event){
  const{name, value} = event.target;
  this.setState({[name]:this.state.messages.concat(value)});
  this.setState({input:""});
  //console.log(this.state.messages);
}

render() {
  let arrMessages = this.state.messages.map((ele,index)=>{
    return <li key={index}>{ele}</li>
  })
  return (
    <div>
      <h2>Type in a new Message:</h2>
      { /* render an input, button, and ul here */ }
        <input
        value={this.state.input}
        name="input" 
        placeholder="Please type something" 
        onChange={this.handleChange}
        /> Your input : {this.state.input}

        <br/>

        <button 
        onClick={this.submitMessage}
        name="messages"
        value={this.state.input}>Submit</button>

        <br/>

        <ul>{arrMessages}</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/81.0.4044.138 Safari/537.36.

Challenge: Manage State Locally First

Link to the challenge:

1 Like
2

The test fail message says:

The input element should render the value of input in local state. Calling the method handleChange should update the input value in state to the current input.

I see that you are using state.input:

<input
  value={this.state.input}
  name="input" 
  placeholder="Please type something" 
  onChange={this.handleChange}
/>

but when I look at handleChange I see:

handleChange(event){
  const{name, value} = event.target;
  this.setState({[name]:value});
  //console.log(value);
}

You are not updating state.input, unless that happens to be the value of name - which it is not - name is undefined. I’m not sure why you need to dynamically name the property here as it is only being called in one spot. When I use a literal prop name, it works.

1 Like
3

You are using setState, check first what states you have:

You only can change/ set state as declared above.

Now check what states are you setting :

If you can identify what I’m talking about, hope you can solve this. Otherwise I would suggest to revise the previous exercises to get a clear concept.

4

Just to be clear, that isn’t entirely true. You can set any state prop you want, regardless of whether or not it was part of the original state. It just gets merged in with setState’s shallow merge. There are use cases where someone would want dynamic props on state. True, I would probably nest those one layer deeper for clarity, but it’s not that you “can’t” do it. The issue is that he OP doesn’t want or need to do it here.

1 Like