Search for a command to run...
Hi, I am Adyasha Mohanty, a self taught developer extraordinaire from India. I am passionate about bringing ideas to life from the ground up whether that’s crafting beautiful or building intuitive user interfaces. Beyond coding, I thrive on sharing knowledge, engaging with the tech community and helping others grow. I love the entire journey of creation from the first line of code to shipping polished, user ready products. Let’s build, learn and ship amazing things together. 🚀
No comments yet. Be the first to comment.
What is React Context 🤔? The React Context provides a way to pass data through the component tree without having to pass props down manually to every level. In React, data is often passed from a parent to its child component as a property. Context ...
When I think about the time I joined the gym in 2024, I almost laugh at how convinced I was that I was “fine.” Just somewhere in the middle, where you tell yourself you are doing okay because it’s more comfortable than admitting you are slipping. I d...
You know that tiny voice in your head that says, “I’ve learned my lesson” right after something goes wrong? yeah. That voice is a liar :) It happens to me more often than I would like to admit. I’ve built product features, debugged issues, and made s...
As someone who spends most of the time with code, walking into a casino in Goa felt like entering a very different kind of system, one that runs not on logic but on human emotions and luck. The flashing lights, the sound of coins dropping, the consta...
even when I used to think it was the dumbest thing ever
I never planned to be an MC.It kind of just happened, and somehow, I ended up doing it for three days straight at React Nexus. Now that it’s all over, I’m still thinking about how much fun I had doing something I never thought I’d enjoy this much. So...
Hey there, fellow coders! 👋 If you've ever dived into the world of React forms, chances are you've encountered the powerhouse known as Formik. I've had my fair share of experiences with it, and let me tell you, it's a fantastic library for managing forms effortlessly. However, like many, I never really took the time to explore its depths—until recently I decided to sit down and get to know it. Here's what I found out!
For those not in the know, Formik is like that buddy who makes dealing with forms a breeze in React. No fuss, no drama, just simple and effective. It acts as a guardian, simplifying the often complex and tedious process of handling form state, validation, and submission. To get started, toss it into your project like this:
npm install formik
# or
yarn add formik
Once installed, you can import Formik into your React components and start building forms with ease.
Now, let's talk about the discoveries that sparked my excitement during this recent exploration.
Ever found yourself needing users to input not one, not two, but a bunch of things in a form? That's where the magical FieldArray comes into play.
Why: Handling arrays of form fields can be like juggling invisible balls. FieldArray says, "Chill, I got this!" It helps you manage lists, multiples, and even complex data structures effortlessly.
How:
<FieldArray name="emails">
{({ push, remove }) => (
<div>
{values.emails.map((email, index) => (
<div key={index}>
<Field name={`emails[${index}]`} />
<button type="button" onClick={() => remove(index)}>
Remove
</button>
</div>
))}
<button type="button" onClick={() => push('')}>
Add Email
</button>
</div>
)}
</FieldArray>
Tired of the same old input fields? Formik's got your back with the VIP treatment for custom components! 🕶️
Why: Sometimes, you want your form to wear a fancy hat. The render prop lets you create custom form fields without sacrificing Formik's superpowers.
How:
<Formik
initialValues={{ customField: '' }}
onSubmit={/* Your submission logic */}
>
{({ values, handleChange }) => (
<form>
<label htmlFor="customField">Custom Field:</label>
<input
type="text"
id="customField"
name="customField"
onChange={handleChange}
value={values.customField}
/>
{/* Your custom rendering logic */}
<div>{/* ... */}</div>
<button type="submit">Submit</button>
</form>
)}
</Formik>
Ever feel like your form re-renders every time you blink? 😳 Not cool, right? Enter React.memo to save the day!
Why: Memoization is like telling your form, "Chill, you only need to change when things actually change." It's like giving your form a cup of ginger tea to relax.
How:
const MemoizedForm = memo(({ values, handleChange }) => (
<Form>
<Field type="text" name="field1" />
<Field type="text" name="field2" />
{/* ...other form components */}
</Form>
));
const OptimizedForm = () => {
return (
<Formik
initialValues={{ field1: '', field2: '' }}
onSubmit={/* Your submission logic */}
>
{({ values, handleChange }) => (
<MemoizedForm values={values} handleChange={handleChange} />
)}
</Formik>
);
}
Formik has a secret club, and it's called Formik Context! 🤫
Why: Imagine your form elements having a chat across the component tree. That's Formik Context! It lets you access form state and actions wherever you want.
How:
import { Formik, Form, Field, useFormikContext } from 'formik';
const CustomInput = ({ label, ...props }) => {
const { values, handleChange } = useFormikContext();
return (
<div>
<label htmlFor={props.name}>{label}:</label>
<input
{...props}
onChange={handleChange}
value={values[props.name]}
/>
</div>
);
};
const AdvancedForm = () => {
return (
<Formik
initialValues={{ /* ... */ }}
onSubmit={(values, actions) => {
// Handle form submission logic here
console.log(values);
actions.setSubmitting(false);
}}
>
<Form>
<CustomInput label="Username" type="text" name="username" />
<CustomInput label="Password" type="password" name="password" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
}
So there you have it! Formik is not just a form manager; it's a versatile tool that makes your form-building journey a breeze.
Explore these features, have fun with your forms, and may your code be forever bug-free! ✨