Not recognising Event Object on Submit of Form with Radio Buttons - forms

Question

I am writing a react component that holds a form, with radio buttons inside it. I've tried to create onChange() and handleSubmit() functions that would collect the value of the selected button and console log the value of it, but the event object isn't being recognised, and I get this error:
Uncaught TypeError: Cannot read property 'target' of undefined
Why is this happening and what can I do about it now?
Here is my code:
class NoteInput extends React.Component {
constructor(props) {
super(props);
this.state={
selectedValue: ''
}
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({selectedValue: e.target.value})
}
handleSubmit(e) {
e.preventDefault();
console.log(this.state.selectedValue);
}
render() {
return (
<div>
<form onChange={this.handleChange()} >
<input type="radio" id="0" name="location" value={this.props.locations[0]} />
<label htmlFor="choice1">Safa Park</label>
<input type="radio" id="1" name="location" value={this.props.locations[1]} />
<label htmlFor="choice2">Mercato</label>
<input type="radio" id="2" name="location" value={this.props.locations[2]} />
<label htmlFor="choice3">Burj Khalifa</label>
</form>
<input onSubmit={this.handleSubmit()} type="submit" value="Submit" />
</div>
);
}
}

Answer 1

You are calling functions instead of passing them to event handler. So pass the function instead, by removing () like this
onChange={this.handleChange}
onSubmit={this.handleSubmit}