React MUI TypeScript

// Filename - App.tsx

import React from 'react';

// Import the LoginForm component
import LoginForm from './components/LoginForm';

// Define a function to handle the 
// submission of the LoginForm
function handleLogin(
    username: string, 
    password: string
) {
    console.log(username, password);
}

// Define the App component
function App() {
    return (
        // Render a div that contains the
        // LoginForm component
        <div>
            {/* Render an H1 element with 
            the text "Login Form" */}
            <h1 style={{ textAlign: 'center' }}>
                Login Form
            </h1>
            {/* Render the LoginForm component */}
            <LoginForm onSubmit={handleLogin} />
        </div>
    );
}

// Export the App component
export default App; 

// Filename - LoginForm.tsx

import React, { useState } from 'react'; 
import { makeStyles } from '@material-ui/core/styles'; 
import TextField from '@material-ui/core/TextField'; 
import Button from '@material-ui/core/Button'; 

// Define CSS styles using the makeStyles 
// function provided by Material-UI 
const useStyles = makeStyles({ 
    form: { 
        display: 'flex', 
        flexDirection: 'column', 
        alignItems: 'center', 
    }, 
    input: { 
        marginBottom: '1rem', 
    }, 
    button: { 
        marginTop: '1rem', 
    }, 
}); 

// Define the type for the props passed 
// to the LoginForm component 
interface LoginFormProps { 
    onSubmit: ( 
        username: string, 
        password: string 
) => void; 
} 

// Define the LoginForm component using 
// the functional component syntax 
export default function LoginForm(props: LoginFormProps) { 

    // Use the styles defined earlier 
    const classes = useStyles(); 

    // Define state variables for the 
    // username and password input fields 
    const [username, setUsername] = useState(''); 
    const [password, setPassword] = useState(''); 

    // Define a function to handle form submission 
    const handleSubmit = 
    (event: React.FormEvent<HTMLFormElement>) => { 

        // Prevent the default form submission behavior 
        event.preventDefault(); 
        
        // Call the onSubmit prop 
        props.onSubmit(username, password); 
    }; 

    // Render the login form using Material-UI components 
    return ( 
        <form className={classes.form} onSubmit={handleSubmit}> 
            <TextField 
                className={classes.input} 
                label="Username"
                variant="outlined"
                value={username} 

                // Update the value of the username state 
                // variable when the input field changes 
                onChange={(event) => setUsername(event.target.value)} 
            /> 
            <TextField 
                className={classes.input} 
                label="Password"
                type="password"
                variant="outlined"
                value={password} 
                // Update the value of the password state variable 
                // when the input field changes 
                onChange={(event) => setPassword(event.target.value)} 
            /> 
            <Button 
                className={classes.button} 
                variant="contained"
                color="primary"
                type="submit"
            > 
                Login 
            </Button> 
        </form> 
    ); 
}

// Filename - App.tsx 

import ClickCounter from './components/ClickCounter'; 
  
function App() { 
    return ( 
        <ClickCounter /> 
    ); 
} 
  
export default App;

// Filename - components/ClickCounter.tsx

import React, { useState } from 'react';

// Importing MUI components Button and Typography
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

// Defining a functional component called 
// ClickCounter
const ClickCounter: React.FC = () => {

    // Initializing the count state to 0 
    // using the useState hook
    const [count, setCount] = useState(0);

    // Defining a function that updates the count
    // state when button is clicked
    const handleButtonClick = () => {
        setCount(count + 1);
    };

    // Return JSX elements that render the 
    // click counter UI
    return (
        <>
            <Typography variant="h4" gutterBottom>
                Click Counter
            </Typography>
            <Typography variant="body1" gutterBottom>
                You have clicked the button {count} times.
            </Typography>
            <Button variant="contained" 
                onClick={handleButtonClick}>
                Click me!
            </Button>
        </>
    );
};

// Exporting ClickCounter component 
export default ClickCounter;