React.js is losing focus with controlled form input - forms

Question

I'm trying to follow the Handling Multiple Inputs example from:
https://facebook.github.io/react/docs/forms.html#handling-multiple-inputs
I tried to add two form elements, firstName and lastName. One is rendered within the main render() function, whereas the other is created using a separate JSX function called LastName().
The result is available here:
https://codepen.io/sagiba/pen/Kmdrdz?editors=0010
class Reservation extends React.Component {
constructor(props) {
super(props);
this.state = {
isGoing: true,
numberOfGuests: 2,
firstName: 'John',
lastName: 'Doe'
};
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
render() {
const LastName = () => {
return (
<label>
Last Name:
<input
name="lastName"
type="text"
value={this.state.lastName}
onChange={this.handleInputChange} />
</label>
);
};
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
<br />
<label>
First Name:
<input
name="firstName"
type="text"
value={this.state.firstName}
onChange={this.handleInputChange} />
</label>
<br />
<LastName />
</form>
);
}
}
ReactDOM.render(
<Reservation />,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
Both are rendered as expected. However when trying to edit the value of last name the component is losing focus on every keystroke. This doesn't happen with firstName.
What am I doing wrong?

Answer 1

React will rerender the application each time there is a change in state. Because of this, it runs the function to recreate your last name component; the function returns something "new" everytime. Just remove it from the function and you'll be golden.
render() {
return (
<form>
<label>
Is going:
<input
name="isGoing"
type="checkbox"
checked={this.state.isGoing}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Number of guests:
<input
name="numberOfGuests"
type="number"
value={this.state.numberOfGuests}
onChange={this.handleInputChange} />
</label>
<br />
<label>
First Name:
<input
name="firstName"
type="text"
value={this.state.firstName}
onChange={this.handleInputChange} />
</label>
<br />
<label>
Last Name:
<input
name="lastName"
type="text"
value={this.state.lastName}
onChange={this.handleInputChange} />
</label>
</form>
);
}
}