Can't type in input element of React application - input

Question

I am creating a react application that is a replica of frogger and I have a form included for when you get a high score to input your name. But you can't type in the input box, no letters show up. Below is my code for the game over/high score divs:
{this.state.collision ? <div >Game Over! {this.checkHighScore() ?
<Modal
isOpen={true}
style={customStyles}
>
<div >
New High Score!
<form style={{zIndex: '9999'}}>
<input type="text" style={{zIndex: '1', color: 'black'}} onChange={(e) => this.onNameChange(e)} type="text" placeholder="Enter Name"/>
<input type="submit" text="Submit" onClick={(e) => this.highScoreSubmit(e)}></input>
</form>
</div>
</Modal>
:
<div></div>
}</div> : <div></div>}
As you can see I'm calling an onChange to store input value in state. I've tried console.log in the onchange function, but it's not registering any input. Also I've tried playing with z-index and making sure the color is black. It seems like something is interfering with event functions for some reason, but not sure what that would be. Thanks for any thoughts!

Answer 1

You most likely need to change onChange={(e) => this.onNameChange(e)} to onChange={(e) => this.onNameChange(e.target.value)} This is because you are passing an event to this.onNameChange, instead of a string.
In the future, don't hesitate to console.log things out. You knew it had something to do with your onChange method, so the next steps would be 1.) to find out if it is firing, and if e is what you expect, and 2.) to follow that through the call to this.onNameChange, logging from within that method to ensure it is being executed with the correct arguments.