I am trying to test whether my 'login' button works and console.log displays the credentials entered into the username and password fields. Myreact app starts up fine and renders the username and password fields for the user to enter their credentials. Its just the consol.log that seems to be the problem :/

I have the following code within my login.js file below for console log:

state = {
    credentials: {username: '', password: ''}
}
Login = event => {
    console.log('this.state.credentials');
}

My login.js file

import React, { Component} from 'react';

// Class components need a render function
class Login extends Component {

    state = {
        credentials: {username: '', password: ''}
    }
    Login = event => {
        console.log('this.state.credentials');
    }

    inputChanged = event => {
        const cred = this.state.credentials;
        cred[event.target.name] = event.target.value;
        this.setState({credentials: cred});
      }
    
      render() {
        return (
          <div>
            <h1>Login user form</h1>
            <label>
              Username:
              <input type="text" name="username"
               value={this.state.credentials.username}
               onChange={this.inputChanged}/>
            </label>
            <br/>
            <label>
              Password:
              <input type="password" name="password"
               value={this.state.credentials.password}
               onChange={this.inputChanged} />
            </label>
            <br/>
            <button onClick={this.login}>Login</button>
            <button onClick={this.register}>Register</button>
          </div>
        );
      }
    }
    
    export default Login;

My App.js file

import React from 'react';
import './App.css';
import Login from './components/login';

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

My Index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: xyz;

Any help is appreciated!