React login

Pocho answered on July 13, 2022 Popularity 10/10 Helpfulness 4/10

answer React login

related login react js

related create login from in react

related react components for login

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

Link to this answer
Share Copy Link

Contributed on Nov 28 2022

Pocho

0 Answers Avg Quality 2/10

Closely Related Answers

login react js

Comment

import React,{useState} from 'react' 

const Login=()=>{ 
	const [email,setEmail]=useState(""); 
	const [passw,setPassw]=useState(""); 
	const[dataInput, setDataInput]=useState(""); 
	const submitThis=()=>{
		const info={email:email,passw:passw}; 
		setDataInput([info]);
	}
	return(
	<div>
		<form action="" onSubmit={submitThis}> 
			<div> 
				<label htmlFor="email">Email</label>
				<input type="text" name="email" id="email" value={email} onChange={(e)=>setEmail(e.target.value)}/> 
			</div> 
			<div> 
				<label htmlFor="passw">Password</label>
			<input type="text" name="passw" id="passw" value={passw} onChange={(e)=>setPassw(e.target.value)}/> 
			</div>  
			<button type="submit">Login</button>
		</form>
	</div>
)}

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: www.codingninjas.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Dec 15 2022

SaI dHaKsHan

0 Answers Avg Quality 2/10

create login from in react

Comment

import React, { useState } from 'react';

const Login = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // Add your login logic here, such as sending a request to your server

    console.log('Form data submitted:', formData);
    // You can use Axios or the Fetch API to send the data to your server for authentication
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            name="email"
            id="email"
            value={formData.email}
            onChange={handleInputChange}
            required
          />
        </div>
        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            name="password"
            id="password"
            value={formData.password}
            onChange={handleInputChange}
            required
          />
        </div>
        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
};

export default Login;

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: chat.openai.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 24 2023

Attractive Addax

0 Answers Avg Quality 2/10

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 t

Link to this answer
Share Copy Link

Contributed on Jul 13 2022

django test

0 Answers Avg Quality 2/10

React login

Contents

More Related Answers

React login

Closely Related Answers

login react js

create login from in react

react components for login

Grepper

Documentation

Social

Legal

Contact

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