GENERATE PASSWORD on REACT!

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 = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ0123456789@_.-';    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

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.