Input showing placeholder instead of value-CodePudding

I am having trouble to set the input to show the placeholder instead of displaying the value from state.

  const initialState = [
    {
      name: "Chris",
      age: 0,
      height: 0,
      weight: 0,
    },
  ];

const [infoValue, setInfoValue] = useState(initialState)

    <div>
     <input type="number" placeholder={0} value={infoValue.age} onClick={} onChange={} />
    </div>

Is there something I can do in onChange or onClick where the user can just enter their values without having to delete the initial 0 first?

CodePudding user response：

The initial value is 0, so it will show up in the field. Empty string might work.

<input type="number" placeholder="0" value="" />

The above snippet was for demo, you just need to change the value of age property in your code.

 const initialState = [
    {
      name: "Chris",
      age: '',
      height: 0,
      weight: 0,
    },
  ];

CodePudding user response：

This is the answer if you want the age in the state to start with 0.

     const initialState = [
    {
      name: "Chris",
      age: 0,
      height: 0,
      weight: 0,
    },
  ];

const [infoValue, setInfoValue] = useState(initialState)

    <div>
     <input type="number" placeholder={0} value={infoValue.age||''} onClick={} onChange={} />
    </div>

CodePudding user response：

You can set the initial value like the way you we're doing, but to change as the user types a new age you could do this:

  const initialState = {
  name: "Chris",
  age: 0,
  height: 0,
  weight: 0,
  },

;

const [infoValue, setInfoValue] = useState(initialState)

<div>
 <input type="number" placeholder={0} value={infoValue.age} onChange={(e) => setInfoValue({...infoValue, age: e.target.value )} />
</div>