CODEWITHSUNDEEP
javascripthtmlreactjsreduxreact-redux
Shubham Bhardwaj
Shubham Bhardwaj

Reputation: 97

Radio button not clicking on single click

index.js

const [sendVia, setSendVia] = useState('astrolger');
const changeValue = (e) => {
    e.preventDefault();
    console.log(e.target.value)
    setSendVia(e.target.value);
};

const handleSubmit = async e => {
    e.preventDefault();
};

 <div className='row mt-2'>
  <div className='col' onChange={e => changeValue(e)}>
   <p>Send By:</p>
   <input type="radio" id="astrologer" name="sendBy" value="astrolger" />  
   <label htmlFor="astrologer" className='ml-1'>Astrologer</label>
   <input type="radio" id="disciple" name="sendBy" value="disciple" className='ml-2'  />
   <label htmlFor="disciple" className='ml-1'>Disciple</label><br />
  </div>
 </div>

Value is changing on single click but option is changing on double click don't know why when i click on disciple value is changed immediately but i have to double click to show that changed value. Any help will be appreicated

Upvotes: 0

Views: 38

Answers (1)

Near
Near

Reputation: 447

I don't understand why you are using e.preventDefault in your onChange function. preventDefault will prevent the radio button from executing its default function which is to get selected on click. Remove that and you are good to go

const [sendVia, setSendVia] = useState('astrolger');
    const changeValue = (e) => {
        console.log(e.target.value)
        setSendVia(e.target.value);
    };
    
    const handleSubmit = async e => {
        e.preventDefault();
    };
    
     <div className='row mt-2'>
      <div className='col' onChange={e => changeValue(e)}>
       <p>Send By:</p>
       <input type="radio" id="astrologer" name="sendBy" value="astrolger" />  
       <label htmlFor="astrologer" className='ml-1'>Astrologer</label>
       <input type="radio" id="disciple" name="sendBy" value="disciple" className='ml-2'  />
       <label htmlFor="disciple" className='ml-1'>Disciple</label><br />
      </div>
     </div>

Upvotes: 1

Related Questions