Unexpected use of 'event' on Login - reactjs

Question

I'm running a react-create-app and it's giving me the following errors on my below Login.js
./src/components/Login/Login.js
Line 6: 'handleClick' is not defined no-undef
Line 6: Unexpected use of 'event' no-restricted-globals
I've tried moving the handleClick event elsewhere in the js file but I continue to get the same error.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button, Checkbox, Col, ControlLabel, Form, FormControl, FormGroup} from 'react-bootstrap';
import './Login.css';
handleClick(event)
{
const username = this.refs.username;
const password = this.refs.password;
const creds = { username: username.value.trim(), password: password.value.trim() };
this.props.onLoginClick(creds)
}
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
};
class Login extends Component {
render() {
const { errorMessage } = this.props;
return (
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email" placeholder="Email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={10}>
<FormControl type="password" placeholder="Password" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button onClick={(event) => this.handleClick(event)} type="submit">Sign in</Button>
</Col>
</FormGroup>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
);
}
}
export default Login;

Answer 1

This ended up working:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button, Checkbox, Col, ControlLabel, Form, FormControl, FormGroup} from 'react-bootstrap';
import './Login.css';
class Login extends Component {
render() {
const { errorMessage } = this.props;
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
}
function handleClick(event) {
const username = this.refs.username;
const password = this.refs.password;
const creds = { username: username.value.trim(), password: password.value.trim() };
this.props.onLoginClick(creds)
}
return (
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email" placeholder="Email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={10}>
<FormControl type="password" placeholder="Password" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button onClick={(event) => handleClick(event)} type="submit">Sign in</Button>
</Col>
</FormGroup>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
)
}
}
export default Login;

Answer 2

Moving handleClick inside the class fixes the error:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Button, Checkbox, Col, ControlLabel, Form, FormControl, FormGroup} from 'react-bootstrap';
import './Login.css';
Login.propTypes = {
onLoginClick: PropTypes.func.isRequired,
errorMessage: PropTypes.string
};
class Login extends Component {
handleClick(event)
{
const username = this.refs.username;
const password = this.refs.password;
const creds = {
username: username.value.trim(),
password: password.value.trim()
};
this.props.onLoginClick(creds)
}
render() {
const { errorMessage } = this.props;
return (
<Form horizontal>
<FormGroup controlId="formHorizontalEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email" placeholder="Email" />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Password
</Col>
<Col sm={10}>
<FormControl type="password" placeholder="Password" />
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button onClick={(event) => this.handleClick(event)} type="submit">Sign in</Button>
</Col>
</FormGroup>
{errorMessage &&
<p style={{color:'red'}}>{errorMessage}</p>
}
</Form>
);
}
}
export default Login;