Hello Developers 🤩🤩
Have you ever logged in to Facebook?
Have you ever inspected the Facebook login page?
If not go to Facebook and try inspecting it, you will find the value of the password filed is not showing.
We will replicate that behavior using React and Formik.
Creating Project
npx create-react-app my-app
After project setup, install formik.
npm install formik --save
Basic setup
Setup a basic template for email and password input with submit button.
import { useFormik } from "formik";
function App() {
return (
<form>
<input name="email" type="email" placeholder="email" />
<input
name="password"
type="password"
placeholder="password"
/>
<button type="submit">Submit</button>
</form>
);
}
export default App;
Implementing Formik
import { useFormik } from "formik";
function App() {
const handleSubmit = (values) => {
console.log(values);
};
const formik = useFormik({
initialValues: {
email: "",
password: "",
},
});
return (
<form
onSubmit={(e) => {
e.preventDefault();
handleSubmit(formik.values);
}}
>
<input
name="email"
type="email"
placeholder="email"
{...formik.getFieldProps("email")}
/>
<input
name="password"
type="password"
placeholder="password"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
<button type="submit">Submit</button>
</form>
);
}
export default App;
Now check the value in Inspect.
Kaboom 🔥🔥🔥
No value in Inspect.
Closing here 👋👋👋
Github Code Repo
This is Shareef.
My recent project yourounotes
My Portfolio
Twitter ShareefBhai99
My other Blogs
Top comments (0)