JavaScript React Components Managing State and Data Flow Adding Items to State

Tetsuya Yokoyama
Tetsuya Yokoyama
11,286 Points

e.preventDefault(); is not working.......

I followed along all of Guil's code but it keeps refreshing when I hit the submit button. I think my e.preventDefault() is not working... the code is like this...

hundleSubmit = (e) => {
        e.preventDefault();
        this.props.addPlayer(this.state.value);
        this.setState({
            value: ""
        });
    }

    render() {
        // console.log(this.state.value)
        return (
            <form onSubmit={this.handleSubmit}>
                <input 
                    type="text"
                    placeholder="Enter a player's name"
                    value={this.state.value}
                    onChange={this.handleValue}
                />
                <input 
                    type="submit"
                    value="Add Player"
                />
            </form>
        );
    }

There's no error comes up, but couldn't get correct output. Could anyone solve this out?

1 Answer

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

Hi there, Tetsuya Yokoyama ! Obviously, I can't see all your code, but the thing that stands out to me right off the bat is the very first word of the code you have posted here. I think you just have a typo. In that line you have:

hundleSubmit = (e) => {

But it is referenced elsewhere as handleSubmit. Note that your first one has a "u" where the second one has an "a". I believe you should try changing that to:

handleSubmit = (e) => {

Hope this helps! :sparkles:

Tetsuya Yokoyama
Tetsuya Yokoyama
11,286 Points

OMG!! Thank you very much Jennifer!!! I could never realize this typo......!!

Really appreciate that you took time to find it out and helped me out!!