Hey, if you’re looking to find out how to create a show/hide password toggle like this, I’m going to show you how you can do it in four steps. The idea is to change the type of input from text to password, then password to text when you click the label.
Step 1
Let’s start by creating an input tag with a password as the type of input.
Step 2
Use the useState() react hook to determine if the password in the input field should be shown, using a boolean state called passwordShown.
As a first step, let’s give the initial boolean state value of false, as we don’t want the password input field to appear when the user tries to enter the password. Users should only see them when they click on the Show Password button.
Step 3
By now, instead of hardcoding the password in the input tag, we need to make it dynamic, so that if the passwordShown boolean state is true, the password will be shown, and if it is false, the password will not be shown.
Step 4
Now, Let’s attach an onClick handler to a tag so that when the user clicks the link it should display the password.
In step3, I explain to you how to make the link text dynamic instead of hard-coded.
That’s all! 😃. We have made a working Show/Hide password toggle. Thanks for reading! 😃 if you like this post and it was helpful, please click the clap 👏 button multiple times to show your support, thank you👏
