This is my code:

const [defaultBuy, setDefaultBuy] = useState({
    data: '',
    price: 0
})

const changeBuyPrice = (e: any) => {
    let value = e.target.value
    if (value > 1000) {
        value = 9000
    }
    console.log(value)
    setDefaultBuy({...defaultBuy, price: value})
}

And this is render:

<input defaultValue={defaultBuy.price} name="" type="text" onChange={(e) => changeBuyPrice(e)} />

If I put number larger than 1000 in input, console.log(value) show me 9000.

But <input> tag not show 9000.

I want to change <input> value also

This is my code:

const [defaultBuy, setDefaultBuy] = useState({
    data: '',
    price: 0
})

const changeBuyPrice = (e: any) => {
    let value = e.target.value
    if (value > 1000) {
        value = 9000
    }
    console.log(value)
    setDefaultBuy({...defaultBuy, price: value})
}

And this is render:

<input defaultValue={defaultBuy.price} name="" type="text" onChange={(e) => changeBuyPrice(e)} />

If I put number larger than 1000 in input, console.log(value) show me 9000.

But <input> tag not show 9000.

I want to change <input> value also

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Feb 21, 2022 at 7:36 Rez MohsneiRez Mohsnei 20711 gold badge66 silver badges1818 bronze badges 2

• 1 try value={defaultBuy.price} – Amaarockz Commented Feb 21, 2022 at 7:41
• 1 onChange={(e) => changeBuyPrice(e)} — creating a new function like that is redundant. Just pass the function you have: onChange={changeBuyPrice} – Quentin Commented Feb 21, 2022 at 7:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you want the input to reflect the value in the state then you need to make it a controlled ponent.

Assign the value in the state to the value prop instead of the defaultValue prop.

At the end, I did e.target.value = value to update the value of the input field

const changeBuyPrice = (e: any) => {
let value = e.target.value
if (value > 1000) {
    value = 9000
}
console.log(value)
setDefaultBuy({...defaultBuy, price: value}) 
e.target.value = value // add this here to update your input field
}