JavaScript React Basics (retired) Designing Data Flow Adding Players to the Scoreboard

Not adding a blank line to the names

Jim Hoskins , et al.,

i noticed a slight design error in the code: if you leave the input text field for the new name to add blank, it still adds just a blank line when you submit by hitting the "add name" button. a big, ugly, blank line.

so i fixed it in the app.jsx file, the in AddPlayerFrom({...}) class, in the onSubmit() member function, i couched the code in a conditional that tests if the state of the input text field for the name's length is greater than 0, then runs the code. if not, the code block is ignored, nothing runs. ā€”

...
  onSubmit: function(e) {
    e.preventDefault();

    if(this.state.name.length > 0) {
      this.props.onAdd(this.state.name);
      this.setState({name: ""});
    }
  },
...

i would also like to hear from Jim, if possible, to see if there's a shorter way to write it, perhaps with the ternary ... ? ... : ...; conditional. i couldn't figure out how to use that with the above code.

best,

ā€” faddah portland, oregon, u.s.a.

You can also try this.state.name.split(" ").join("").length > 0 to prevent a user from submitting an input containing only multiple whitespaces.

1 Answer

That's an excellent idea! Good job picking up on that! This is why testing becomes so important.

I think your solution is simple, clear and efficient (better to handle there than higher up).

The only other way I can think to handle it is to send a default name if one isn't provided. The following code would give them a generic name with the number currently in nextId (e.g. Player 4):

  onSubmit: function(e) {
    e.preventDefault();

    this.props.onAdd(this.state.name || 'Player ' + nextId);
    this.setState({name: ""});
  },