React input can't type anything - reactjs

Question

I have an input text and I can't write in it !
I tried to control it like that :
handleUserInput(e){
console.log('ok')
this.setState({
newPlayer: e.target.value
})
}
<input type="text" className="inputTexte" placeholder="Username" value={this.state.newPlayer} onChange={e => this.handleUserInput(e.target.value)} />
But even if I just put an input like that :
<input type="text" />
I can't write in it.
It's drive me crazy...
Do you know what I am doing wrong ?
Thanks

Answer 1

handleUserInput(e){
console.log('ok')
this.setState({
newPlayer: e.target.value
})
}
Most probably you have to bind this value to handler function, inside your constructor,
this.handleUserInput= this.handleUserInput.bind(this);
Or Change the handler function to fat arrow function like below
const handleUserInput = (e)=>{//write your code inside}
But before this please the check the developer console and update the error here

Answer 2

Define like this
handleUserInput(value){
console.log('ok')
this.setState({
newPlayer: value
})
}
because you already passed input value e.target.value
onChange={e => this.handleUserInput(e.target.value)}

Answer 3

You are setting state the state wrong, you are passing e.target.value to handleChange function and again using event.target.value while setting state
change your input as follows and try
<input type="text" className="inputTexte" placeholder="Username" value={this.state.newPlayer} onChange={e => this.handleUserInput(e)} />
or change handleUserInput as follows
handleUserInput(value){
console.log('ok')
this.setState({
newPlayer: value
})
}

Answer 4

State does update synchronously. This means that when React actually performs the update, it is at a later time and the value of the event is lost. This is because React uses a synthetic event wrapper to wrap all DOM events to ensure compatibility across all browsers and this wrapper is emptied after a while to be reused. My proposal is to simply store the event value at a variable, which will ensure it retains its value when the state update does happen.
handleUserInput(e){
console.log('ok')
const eventValue = e.target.value;
this.setState({
newPlayer: eventValue
})
}
Also, you call the function with event.target.value as parameter, and then you access the .target.value again, so it does not work.
onChange={e => this.handleUserInput(e)}
And as described above, inside handleUserInput access it via e.target.value, the way you had it previous implied that inside the function you were trying to access e.target.value.target.value.

Answer 5

It have a code erro, you are pass the event target value in the function but is expected the event only
try:
handleUserInput(e){
console.log('ok')
this.setState({
newPlayer: e.target.value
})
}
<input type="text" className="inputTexte" placeholder="Username" value={this.state.newPlayer} onChange={this.handleUserInput} />