Faddah Wolf
12,811 PointsNot 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.
1 Answer
Iain Simmons
Treehouse Moderator 32,246 PointsThat'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: ""});
},
gevuong
2,377 Pointsgevuong
2,377 PointsYou can also try this.state.name.split(" ").join("").length > 0 to prevent a user from submitting an input containing only multiple whitespaces.