Initializing controlled React input with blank value and type="number"

Question

Problem:

I have a controlled input, using Material-UI TextField. I want to have purely numbers, and support type="number" for mobile keyboards, but when having empty string as default, and having a parseInt in the onChange, it will not allow 0 (zero). All other numbers are displayed correctly.

It even correctly sets 0 in the underlying object bound to the TextField.

In other inputs i have default values as empty strings (heavily simplified), like shown:

<TextField
    name={"inputToBeSaved"}
    value={this.state.objectForSaving.inputToBeSaved|| ''}
    onChange={this.handleChange}
    variant="outlined"
/>

With corresponding handleChange:

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState(prevState => ({
        objectForSaving: {
            ...prevState.objectForSaving,
            [name]: value
        }
    }))
}

The example above works as espected, but not when trying to work with numbers:

<TextField
    type="number"
    name={"numberToBeSaved"}
    value={this.state.objectForSaving.numberToBeSaved|| ''}
    onChange={this.handleChange}
    variant="outlined"
/>

handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.type === 'number' ? parseInt(target.value) : target.value;
    const name = target.name;
    this.setState(prevState => ({
        objectForSaving: {
            ...prevState.objectForSaving,
            [name]: value
        }
    }))
}

I know that defaulting to 0, or making it uncontrolled will fix it, but some times I do have values there from the server, so I want to reuse the components.

I have tried to look at this post, but did not find any good solution to keep it controlled: Initializing React number input control with blank value?

Ryan Cogswell · Accepted Answer · 2019-05-21 12:48:40Z

2

0 is falsey, so in the following condition:

this.state.objectForSaving.numberToBeSaved|| ''

if numberToBeSaved is 0, then the expression will evaluate to empty string.

If you are just trying to check if numberToBeSaved is defined, then you can do this more robustly with:

this.state.objectForSaving.numberToBeSaved === undefined ? '' : this.state.objectForSaving.numberToBeSaved

answered May 21, 2019 at 12:48

Ryan Cogswell

81.8k10 gold badges242 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

simonkaspers1 Over a year ago

That was a perfect explanation. I testet a little and made a isUndefined helper-method. That solved my problem. Thank you.

Ryan Cogswell Over a year ago

If you happen to already be using lodash, you could use its isUndefined or isNil functions rather than duplicating these kind of helper methods in your own code.

Tameem Safi · Accepted Answer · 2019-05-21 12:09:53Z

0

You can convert the value to string when setting the TextField prop.

const {
  objectForSaving: {
    inputToBeSaved = '',
  },
} = this.state

<TextField
  name={"inputToBeSaved"}
  value={String(inputToBeSaved)}
  onChange={this.handleChange}
  variant="outlined"
/>

answered May 21, 2019 at 12:09

Tameem Safi

7285 silver badges6 bronze badges

Comments

Behzad · Accepted Answer · 2023-04-25 20:57:06Z

0

And if using formik, do it like this:

const formik = useFormik({
    initialValues: {
      inputToBeSaved: "",
      ...
    },
  });

  <TextField
    id="inputToBeSaved"
    name="inputToBeSaved"
    type={"number"}
    {...formik.getFieldProps("inputToBeSaved")}
    label={"input To Be Saved"}
    variant="outlined"
  />

answered Apr 25, 2023 at 20:57

Behzad

2,2601 gold badge26 silver badges50 bronze badges

Collectives™ on Stack Overflow

Initializing controlled React input with blank value and type="number"

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related