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?
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,
},
];
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>
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>