Initializing empty state that will receive a number in React

Question

In a React controlled form, what is the correct initial value for a number input?

If I set myNumber to '' , [] , or {} , it works, but onChange the value becomes "25" instead of 25 and then I have to convert it back to an integer. If I set it as 0 my input loads with a 0 as its value and I'd rather the input load empty.

What's the best way to do this?

Edit: The comments and answers below all focus on setting/converting the value on change. My question is to confirm whether or not that's the only option. If it were an array, we'd start with an empty array; an object would start as an empty object; a string would start as a blank string.

Is the only way to initialize state of a number to set it as another type and then convert it?

class NumberForm extends Component {
  state = {
    myNumber: ''
  }

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
  }

  render() {
    return (
      <form>
        <input
          type="number"
          name="myNumber"
          value={this.state.myNumber}
          onChange={this.handleChange}
        />
      </form>
    );
  }
}

2022 Edit: How I'd handle this today...

Use Hooks & TypeScript

const NumberForm: React.FC = () => {
  const [myNumber, setMyNumber] = useState<number>()

  return (
    <form>
      <input
        type="number"
        name="myNumber"
        value={myNumber}
        onChange={e => setMyNumber(e.target.value)}
      />
    </form>
  );
}

Answer 1

You should parse the int as the value is getting read from the event.target.value which will always give you string

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: parseInt(value, 10) })
  }

Answer 2

You can use parseInt when use the setState:

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: parseInt(value) })
  }

But maybe is necessary to valid the value before execute parseInt, because can happen a error like Received NaN for the value attribute. If this is expected, cast the value to a string. attribute. If this is expected, cast the value to a string.

So maybe with try/catch can solve your problem:

  handleChange = (e) => {
    const { name, value } = e.target

    try {
      this.setState({ [name]: parseInt(value) })
    } catch (e) {
      this.setState({ [name]: 0})
    }
  }

Answer 3

class NumberForm extends Component {
  state = {
    myNumber:parseInt('')
  }

  handleChange = (e) => {
    const { name, value } = e.target
    this.setState({ [name]: value })
//this.setState({ [name]: parseInt(value, 10) })
  }

  render() {
    return (
      <form>
        <input
          type="number"
          name="myNumber"
          value={this.state.myNumber}
          onChange={this.handleChange}
        />
      </form>
    );
  }
}

This could works for starting your state and html element in empty

Answer 4

Here we GO SOLUTION for this problem is you can parse the value of state in handler function.

 const handleChange = (event) => {
       
        this.setState({ [event.target.name]: parseInt(event.target.value, 10) })
      }