Configurate Custome amount field-CodePudding

How to configurate custom amount field? When I am trying to submit my own price, I have problem. When I submit just one digit, I am getting empty value, if I am submitting two digits or more, it seems last digit of amount is missing. If I submit button, I am getting value. Buttons are ok.

let v = 0
const [price, setPrice] = useState(0)
const [yourPrice, setYourPrice] = useState('')

const handleSubmit = (e) => {
  e.preventDefault()
   clickEvent()
  console.log(price)
  setYourPrice('') 
}


function clickEvent (e, v){
 if(v === 5 || v === 10 || v === 15) {
   setPrice(v)
   setYourPrice('')
 } else {
  return 
 }

}


const onChangeSuma = e => {
  e.preventDefault()
  setYourPrice(e.target.value)
  
  setPrice(yourPrice)
}

here is form

 <form onSubmit={handleSubmit}>

                 <div className="d-flex justify-content-between">
                   <button className={ `${price === 5 ?
                                        'active' : 'noActive' }`} 
                   onClick={e => clickEvent(e, 5)}>
                   $5
                  </button>

                  <button className={ `${price === 10 ? 
                                       'active' : 'noActive'}`}
                  onClick={e => clickEvent(e, 10)}>
                    $10
                  </button>

                  <button className={` ${price === 15 ?
                                     'active' : 'noActive '}`}
                  onClick={e => clickEvent(e, 15)}>
                    $15
                  </button>
                 </div>

                  <div className="col text-center pt-1 fs-5 m-1 py-2 ">
                    <label>Your Price</label>
                    <input 
                     type="number"
                     className={yourPrice ? 'active' : 'noActive'}
                     placeholder='$ Other'
                     id="inputID"
                     autoFocus={yourPrice}
                     value={yourPrice}
                       onChange={onChangeSuma}
                    />
                  </div>

                  <button className='btn btn-secondary
                          border-0 rounded-0  py-2
                           w-100' type='submit'>SUBMIT</button>
                  </form>

CodePudding user response：

When you do setState, it doesn't update the state immediately. You will get the updated state in the next re-render.

const onChangeSuma = (e) => {
  e.preventDefault()
  setYourPrice(e.target.value)
  
  // setPrice(yourPrice)
  // The following line changed
  setPrice(e.target.value)
}