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 Components Managing State Adding Items to State

David Curran
David Curran
7,682 Points
Posted by David Curran
David Curran
7,682 Points

Input name field not clearing when I submit the name to the app

I have been following along with the Scoreboard App with Laura Coronel and I am on the Adding Items to State. I have noticed that the input field does not clear when I submit the name of the new person being added. So far everything works apart from clearing the input field clearing on submit. Here is the code.

const handleSubmit = (event) => { event.preventDefault(); props.addPlayer(value); setValue(""); }

The setValue method is local to the AddPlayerForm. The handleSubmit function then sets the setValue method to an empty string. This works for Laura but not for me.

Can anyone help and explain why it is not working. Thanks a lot. David

2 Answers

Laura Coronel
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher
Laura Coronel
.a{fill-rule:evenodd;}techdegree
Laura Coronel
Treehouse Teacher

Hey David Curran, sorry to hear you're having issues with the code. Do you mind copying and pasting your entire AddPlayerForm here so I can take a look at the code?

Helpful tip. Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting. Example below: 

// ```js
// Paste code here
// ```
Edwin Breton
Edwin Breton
19,027 Points
Edwin Breton
Edwin Breton
19,027 Points

Not sure if it's because of the changes I made to make the code-along work with Vite, but I'm having the same issue. Maybe David Curran found a solution? If not I'd love to know what the problem could be.

... Actually, as I was typing this I figured out the problem:

Maybe it's easy to miss in the explanation, but the input value has to be set to {value} or there will be nothing to set when it calls setValue in the `handleSubmit. So it should be like this:

<input 
                type="text" 
                value = {value} //This is the part that was missing.
                placeholder="Enter a player's name"
                onChange={(event)=> setValue(event.target.value)}
/>

Hopefully, this helps someone else who might have missed that as well!