Value property on input field changes after a second user interaction - React - reactjs

Question

I have a form with two input elements - one for name (type="text") and one for age (type="number"). I manage the form state in the parent component. I have my handler methods and everything set up. The form state changes when user types. Also the input value property on the name field receives its value based on the current state, but the number field does not receive it while user types but on a second interaction with the page (a click somewhere else let's say)
Here is my Form component:
const Form = (props) => {
return (
<div className="col-md-4 form">
<form id="myForm">
<div className="form-group">
<label>Please, enter your name</label>
<input onChange={props.inputChanged} id="name" type="text" className="form-control" name="name"
placeholder="Name" value={props.data.name}/>
</div>
<div className="form-group">
<label>How old are you?</label>
<input onChange={props.inputChanged} id="age" type="number" className="form-control" name="age"
placeholder="Age" value={props.data.age}/>
</div>
</div>
And the parent class based component which owns the state:
class DbControls extends Component {
//INITIAL STATE
state = {
name: '',
age: '',
greeting: 'hello',
role: 'admin'
}
//HANDLE USER INPUT FOR NAME AND AGE
inputHandler = (e) => {
if (e.target.id === 'name') {
this.setState({name: e.target.value})
} else if (e.target.id === 'age') {
this.setState({age: e.target.value})
}
}
//HANDE USER PREFERENCES FOR GREETING AND ROLE
selectHandler = (e) => {
if (e.target.id === 'greet') {
this.setState({greeting: e.target.value})
} else if (e.target.id === 'role') {
this.setState({role: e.target.value})
}
}
render() {
return (
<div className="container-fluid">
<div className="row">
<Form data={this.state} inputChanged={this.inputHandler} selectChanged={this.selectHandler}/>
<div className="col-md-6 table">
<Table tableFor="Admins table"/>
<Table tableFor="Moderators table"/>
</div>
</div>
</div>
);
}
}
I am not sure if this is an actual problem but I was just curious what might be the reason for that behavior?

Answer 1

As per some of your comments i understand that the real issue you are facing is the the DOM value attribute is not in sync with the value property.
This is by design, there is a lot of talk about this issue and it mostly related to the confusion people do with:
jsx value attribute / property
DOM (devtools html) value attribute
These are not the same thing.
There is another thing to consider, related to passwords exploit.
You can read this issue for better understanding and more details.

Answer 2

Simplify how the inputs are setting state based upon the input's e.target.name and e.target.value. By design, the DOM number input value will only update when unfocused, but state is always up-to-date.
Here's a working example: https://codesandbox.io/s/qzl5knl4kj
formInputs.js
import React, { Fragment } from "react";
export default ({ age, handleChange, name }) => (
<Fragment>
<label>Please, enter your name: </label>
<br />
<input
onChange={handleChange}
type="text"
className="uk-input"
name="name"
placeholder="Name"
value={name}
style={{ width: 300, marginBottom: 10 }}
/>
<br />
<label>How old are you?</label>
<br />
<input
onChange={handleChange}
type="number"
className="uk-input"
name="age"
placeholder="Age"
value={age}
style={{ width: 300, marginBottom: 10 }}
/>
<br />
</Fragment>
);
index.js
import React, { Component } from "react";
import { render } from "react-dom";
import FormInputs from "./formInputs";
import "uikit/dist/css/uikit.min.css";
import "./styles.css";
class App extends Component {
state = {
name: "",
age: "",
greeting: "hello",
role: "admin"
};
handleChange = ({ target: { name, value } }) => this.setState({ [name]: value });
handleFormClear = () => this.setState({ age: "", name: "" });
handleSubmit = e => {
e.preventDefault();
const { age, name } = this.state;
if (!age || !name) return;
alert(`Name: ${name}, Age: ${age}`);
};
render = () => (
<form onSubmit={this.handleSubmit} style={{ textAlign: "center" }}>
<h1>Mixed Input Fields</h1>
<FormInputs {...this.state} handleChange={this.handleChange} />
<button
style={{ marginBottom: 20, marginRight: 10 }}
type="submit"
className="uk-button uk-button-primary"
>
Submit
</button>
<button
style={{ marginBottom: 20 }}
type="button"
className="uk-button uk-button-danger"
onClick={this.handleFormClear}
disabled={!this.state.name && !this.state.age}
>
Clear
</button>
<div>
<pre style={{ margin: "auto", width: 300 }}>
<code>
Name: {this.state.name}
<br />
Age: {this.state.age}
</code>
</pre>
</div>
</form>
);
}
render(<App />, document.getElementById("root"));