Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Faddah Wolf
Faddah Wolf
12,811 Points

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.

gevuong
gevuong
2,377 Points

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

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

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: ""});
  },