How can I use a placeholder with a number input in React?

user_6797267 0
Viewed 15305

I have a number input in a form like follows :

<input
  type="number"
  id="weight"
  onChange={this.handleChange}
  value={this.state.weight}
  placeholder="Enter weight…"
/>

How can I have a placeholder phrase display on it ?

If I initialy set this.state.weight to value 0, then no placeholder displays.

If I set it to null the placeholder displays but get this ugly warning

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

formik reactjs forms
4 Answers

You can use: weight: "" 

class App extends React.Component {
  state = {
    weight: "",
  };

  handleChange = e => this.setState( { weight: e.target.value } )

  render() {
    return (
      <div>
        <input
          type="number"
          id="weight"
          onChange={this.handleChange}
          value={this.state.weight}
          placeholder="Enter weight…"
        />
      </div>
    );
  }
}

ReactDOM.render( <App />, 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>
<div id="root"></div>

If you want a number at the end of the change, then you can use:

handleChange = e => this.setState( { weight: e.target.valueAsNumber } )
user_70604410 

 class App extends React.Component{
   constructor(props){
  super(props);
    this.state = {weight:undefined}
   }
   render(){
  return(
   <input
          type="number"
          id="weight"
          value={this.state.weight}
          placeholder="Enter weight…"
        />
  )
   }
 }

 ReactDOM.render(
 <App/>,
 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>
<div id="root"></div>

Define weight with undefined that will work.

this.state = {
    weight:undefined
};
user_67818890

You need the empty value to render an empty string, with a null default value. Here is a fiddle

 <input
    type="number"
    id="weight"
    onChange={(e) => this.setState({ age: e.target.value })}
    value={this.state.age || ''}
    placeholder="Enter weight…" />
  />

React still considers an <input type="number" to be an input, and it needs to be controlled.

user_7882600

http://www.ecma-international.org/ecma-262/5.1/#sec-4.3.9

Yes, we intentionally treat undefined and null differently, as does JS. Basically, reading the spec definitions is our explanation. as stated, NULL VALUE : primitive value that represents the intentional absence of any object value

Testing for the something which is not actually present is not something I would recommend.

<input
    type="number"
    id="weight"
    onChange={(e) => this.setState({ age: e.target.value })}
    value={this.state.age || undefined}
    placeholder="Enter weight…" />
 />

this is what you are probably lookin' for!

user_59562540
Related