one radio button is checked in as default

Viewed 23

When running this React app, the 'No' button is already checked. I'm new to React and I couldn't pinpoint the error in this code.

<div id='broker'>
  <div className='d-flex justify-content-between mb-3'>
    <label>Have you engaged a broker or banker?</label>
    <div>
      <label className='form-check-label me-2' htmlFor='has_broker'>Yes</label>
      <input className='form-check-input me-4' name='has_broker' type='radio' value='Yes' onChange={handleChange} checked={values.has_broker === 'Yes'} />

      <label className='form-check-label me-2' htmlFor='has_broker'>No</label>
      <input className='form-check-input' label= 'No' name='has_broker' type='radio' value='No' checked={values.has_broker === 'No'}
        onChange={(e) => {
            handleChange(e)
            setFieldValue('broker', '')
        }} />
    </div>
  </div>

  {
    values.has_broker === 'Yes' && <>
      <FormControl type='text' name='broker' title='Broker Name' required={true} placeholder='e.g. Morgan Stanley'
        value={values.broker} error={errors.broker}
        onChange={handleChange}
      />
    </>
  }

  <hr />
</div>
0 Answers
Related