This content originally appeared on DEV Community and was authored by BigBitDev
Hi! today's post its a little tutorial that show how to made a password generator on ReactJS with useState hook! enjoy it!😋
Here you got a live show of the app: PassGenerator
The Code:
import React, {useState} from 'react'
import { Container, Button } from 'react-bootstrap'
import "./GeneratorForm.css"
const GeneratorForm = () => {
let characters = 'abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQURSTUVWXYZ0123456789@_.-';
const genPass = ()=>{
let result1 = (Math.random()*characters.length).toString(15).substring(1, 20);
return result1
}
//Hooks
const[pass,setPass] = useState("");
return (
<>
<Container className="text-center container_bg_bg-gradient">
<h1>Generate You own Password</h1>
<Button onClick={()=>setPass(genPass())}>Generate Password</Button>
<h2 className='style_css'>{pass}</h2>
</Container>
</>
);
}
export default GeneratorForm
👁️🗨️ I use react-boostrap library to made it responsive and the general styles.
Explanation:
- Function:
- Set a variable that save all character in only one string
-
Create a function use the following methods:
- Math.random() (in order to generate an aleatory number)
- toString() to convert that number into a string, (the parameter is the length of the string).
- toSubstring() to generate the string(initial position, length)
Hook:
Use the Hook useState, and set it with the above-mentioned function.
You can put the value wherever you want in my case I put it in a h2 tag.
Well I hope you find it helpful. If you have any questions please let me know in the comments and I'll be waiting for feedback.👋🖖
This content originally appeared on DEV Community and was authored by BigBitDev
BigBitDev | Sciencx (2022-01-13T18:33:53+00:00) GENERATE PASSWORD on REACT!. Retrieved from https://www.scien.cx/2022/01/13/generate-password-on-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.