radio buttons are requiring double click to get selected but they work even after clicking once
event.js
import EventList from '../components/EventList'
import React, { Component } from 'react'
import Radio from '../components/Radio';
export class Event extends Component {
constructor(props) {
super(props);
this.state = {
eventType:'ALLEVENTS',
};
this.handelChange = this.handelChange.bind(this)
}
DUMMY_EVENTS = [
{
id:'e1',
image:'https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
name:'diwali event',
verified:true,
joinCount:50,
creatorId:'u1',
creatorName:'Bikaraj',
description:'this event is organized by bikaraj to celebrate holi'
},
{
id:'e2',
image:'https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
name:'holi event',
verified:false,
joinCount:40,
creatorId:'u2',
creatorName:'Akash',
description:'this event is organized by Akash to celebrate holi'
},
];
handelChange = (e)=>{
e.preventDefault();
this.setState({eventType:e.target.value})
}
render() {
const currentEventType = this.state.eventType;
const filteredEvents=''
if(currentEventType === 'VERIFIED'){
this.filteredEvents = this.DUMMY_EVENTS.filter(event =>event.verified === true);
}
else if(currentEventType === 'UNVERIFIED'){
this.filteredEvents = this.DUMMY_EVENTS.filter(event =>event.verified === false);
}
else{
this.filteredEvents = this.DUMMY_EVENTS;
}
return (
<React.Fragment>
<Radio handelChange={this.handelChange}/>
<div>
<EventList events={this.filteredEvents} />
</div>
</React.Fragment>
)
}
}
export default Event
Radio.js
import React from 'react'
const Radio = (props)=> {
return (
<div onChange={props.handelChange}>
<input type="radio" id="other" value="ALLEVENTS" name="eventType" defaultChecked/> All events
<input type="radio" id="other" value="VERIFIED" name="eventType"/> verified
<input type="radio" id="other" value="UNVERIFIED" name="eventType"/> unverified
</div>
)
}
export default Radio