Breaking News: Grepper is joining You.com. Read the official announcement!

react components for login

django test answered on July 13, 2022 Popularity 9/10 Helpfulness 2/10

answer react components for login

related React login

react components for login

Comment

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 = () =>
    {
    };
}

Popularity 9/10 Helpfulness 2/10 Language typescript

Source: stackoverflow.com

Tags: typescript

Link to this answer
Share Copy Link

Contributed on Jul 13 2022

django test

0 Answers Avg Quality 2/10

Closely Related Answers

React login

Comment

import { useState } from 'react';
import './App.css';
 
function App() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [isLoggedin, setIsLoggedin] = useState(false);
 
  const login = (e) => {
    e.preventDefault();
    console.log(name, email, password);
    const userData = {
      name,
      email,
      password,
    };
    localStorage.setItem('token-info', JSON.stringify(userData));
    setIsLoggedin(true);
    setName('');
    setEmail('');
    setPassword('');
  };
 
  const logout = () => {
    localStorage.removeItem('token-info');
    setIsLoggedin(false);
  };
 
  return (
    <>
      <div style={{ textAlign: 'center' }}>
        <h1>This is React WebApp </h1>
        {!isLoggedin ? (
          <>
            <form action="">
              <input
                type="text"
                onChange={(e) => setName(e.target.value)}
                value={name}
                placeholder="Name"
              />
              <input
                type="email"
                onChange={(e) => setEmail(e.target.value)}
                value={email}
                placeholder="Email"
              />
              <input
                type="password"
                onChange={(e) => setPassword(e.target.value)}
                value={password}
                placeholder="Password"
              />
              <button type="submit" onClick={login}>
                GO
              </button>
            </form>
          </>
        ) : (
          <>
            <h1>User is logged in</h1>
            <button onClickCapture={logout}>logout user</button>
          </>
        )}
      </div>
    </>
  );
}
 
export default App;

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: www.geeksforgeeks.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Nov 28 2022

Pocho

0 Answers Avg Quality 2/10

react components for login

Contents

More Related Answers

react components for login

Closely Related Answers

React login

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.