TYPESCRIPT

react login

import React  from 'react'
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
export default function Header(){
   return(<>    
   <Navbar bg="dark" variant="dark">
           <Container>
             <Navbar.Brand href="#home">To DO</Navbar.Brand>
             <Nav className="me-auto">
                <Nav.Link href="#home">Home</Nav.Link>
               <form onSubmit={handleLogin} >
               <input type="text" placeholder="username" name="username"></input>
               <input type="password" placeholder="password" name="password"></input>
               <button className="btn1" type="submit"  >Login</button>
              </form> 
              <h5 id="head"> not a user !? signup here </h5>
              <form  >
               <input type="text" placeholder="username" name="username"></input>
               <input type="password" placeholder="password" name="password"></input>
              <button className="btn1" type ="submit" href="register" >signup</button>
             
              </form>
             </Nav>
           </Container>
         </Navbar>   
   </>)
 } 

react components for login

import React, { Component } from "react";


export default class Login extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state ={email:"", password:""};
    }
    render()
    {
        return <div className="col-lg-9">
            <h4 className="m-1 p-2 border-bottom">Login</h4>
            <div className="form-group form-row">
                <label className="col-lg-4">Email:</label>
                <input type="text" className="form-control" value={this.state.email}
                onChange={(event)=>{this.setState({email:event.target.value}); console.log(this.state.email);}}/>
            </div>
            <div className="form-group form-row">
                <label className="col-lg-4" value={this.state.password} 
                onChange={(event)=>{this.setState({password:event.target.value}); console.log(this.state.password);}} >Password:</label>
                <input type="password" className="form-control"/>
            </div>
            <div>
                <button className="btn btn-primary" onClick={this.onLoginClick}>Login</button>
            </div>
        </div>;
    }
    onLoginClick = () =>
    {
    };
}