DEV Community: Trisha Lim

How to stay relevant as a developer

Trisha Lim — Wed, 01 Apr 2026 08:15:36 +0000

We are seeing a trend in layoffs in perfectly healthy companies. Blocks laid off nearly half their staff, and it’s not because they can’t pay them:

Gross profit continues to grow… but something has changed. We're already seeing that the intelligence tools we're creating and using, paired with smaller and flatter teams, are enabling a new way of working which fundamentally changes what it means to build and run a company.

— Jack Dorsey

We’ve all heard it: AI is coming for your job. This looks like Exhibit A, doesn’t it?

There’s a real point buried in the hype. AI will happily eat the tedious, time-heavy parts of writing code. And if “I write code” is the entire value you bring, then AI is going to replace you.

But if you’d like to be better than that, here are a couple of ideas.

Ship faster

Instead of working less, put in the same effort and ship more. Teams will hit the same output with half the people, so you need to be twice as productive.

Efficiency doesn’t shrink demand; it expands it. The easier it is to build something, the more things your company will decide are "worth building." This is called Jevon's Paradox.

But don't ship AI slop

AI can write complex regex (so glad I never learned to do that) and can work with HTML canvas, but it's still a junior dev in many ways. Inefficient queries. Repetitive code.

LLMs lack context, even if you refine your claude.md. They often don't know that there's existing code they can reference to implement a similar functionality unless you've specified it. Maybe you want to structure your database schema for a feature you have in mind that isn't implemented yet.

Your job is to spec, review and keep the codebase quality high.

Expand your skillset, and collaborate less

Frontend devs can do backend now. Full stack devs can learn design. Instead of handing over your work for someone else to fill in the gaps, do it yourself. Write that API endpoint, design that error state. Less collaboration means less communication overhead for the team and more ownership for each team member. Be the driver.

You may feel like you have to ask someone's opinion before making a decision because "it's not your job". Then you are waiting on an answer. Then you disagree, and have a discussion. Whoever has the biggest ego wins, and now you've wasted four working days.

Learn design

AI still sucks at design. You can make it copy other designs. But to know which designs to copy requires taste — knowing what looks good, what doesn't, and why. Refactoring UI is the best resource out there to teach developers that.

Now that you have taste, use Magic Patterns to brainstorm design ideas using the /inspiration command.

In your coding assistant, install impeccable commands that will point out design issues and help you fix them. I usually start with /critique which tells me what's wrong and which commands to run next like /polish and /normalize.

Be your own manager

Ask yourself, what should I work on? What's the next best thing to do to push the business forward? In an era where we can use agents to build anything, what's left is deciding what to build and how.

Going back to the first point of shipping faster — your team lead can ship faster too. What's stopping them from using Claude instead of delegating to you?

You need to come up with your own ideas, find problems to solve, and prioritize. You're now a PM with agents as your employees. This is a skill that can be learned.

Don't be distracted by the tool

Every week, a new AI tool comes out that tempts you to change your workflow because it "changes the game" and now "we're cooked". Stay curious and keep learning, but always remember that your #1 job is to ship, and AI is just a tool to do that faster and better.

As a side effect, work feels more fulfilling

To sum it all up, you need to have a product mindset (know what to build) and take ownership (build the thing from start to finish).

When you can ship features on your own that are also your own ideas, you can say, "I did that." And that makes you feel more creative and less like a machine ticking off a todo list. You can be proud of your work because it's yours.

Do this before optimizing your Lighthouse score

Trisha Lim — Mon, 16 May 2022 07:35:15 +0000

What is Lighthouse?

Lighthouse is a tool for measuring page quality that gives you tips and recommendations in improving user experience. It gives you a score of up to 100 based on performance, accessibility, best practices and SEO.

Is it really that important?

It's easy to fall into the trap of optimizing your Lighthouse score and trying to reach 100. It's satisfying to make small tweaks to your code and see that number go up and turn green.

It's easier to optimize what we can quantify. That's why we measure career success with salary and net worth, rather than job satisfaction and freedom. It's the same for school and some people's (🙋) obsession with grades.

If Lighthouse tells you that you have some major issues on your site, sure, go ahead and fix it. But focus on the goal. At a certain point, there are other things you can do for your site that have much higher impact than getting your score from 90 to 100.

Lighthouse scores of successful websites

Overengineering distracts you from the most important things. Let's go over some famous websites and their Lighthouse scores.

1. RemoteOK - a directory of remote jobs, making over $2M/year

2. Upwork - the world's leading marketplace for freelancers

3. Web3 Career - the #1 result when you search "web3 jobs" on Google

Instead of optimizing your Lighthouse score, ask yourself these questions.

Does your site work well in all breakpoints?

We usually design for desktop first. Chances are, you have a high percentage of mobile users, as we're on our phones all. the. time. So don't treat your mobile experience as an after thought. It might even be more important than desktop.

What's the goal of your website, and is it designed in a way that makes your users do what you want?

This is called a call-to-action (CTA). Whether it's a portfolio site, landing page, e-commerce or SaaS, you should know what you want your users to do before leaving, like:

For a portfolio website, you want leads to contact you and discuss potential work.
For a SaaS landing page, you want users to sign up for a free trial.
For a blog, you want users to subscribe to your newsletter.

Make your CTA loud and clear by:

Making your CTA buttons stand out.
Writing copy that leads users to click those CTA's.
Having a CTA section at the bottom, which users see after they've read and understood what you're offering.

What do my pages look like when shared on social media?

You've written an awesome blog post. The content is absolutely 🔥. This is gonna bring a lot of value to your readers. Then you share the link on Twitter and the preview looks nothing like the blog post you were trying to tell everyone about. 👎

Make sure you have your meta image, title and preview right. Test them on Facebook and Twitter.

What can you do to make users click throughout your site and go to different pages?

Once you get somebody to a page on your site, take advantage of it and make it easy for them to navigate to other pages. Here are a few examples:

On each blog post, talk a bit about yourself and add relevant links to get to know you more.

For products or projects or blog posts, show related content that says something along the lines of: "You might like this.."

Breadcrumbs to go back to pages up the hierarchy.

Mega menu for a high level overview of your site.

Summary

Lighthouse is a great tool to detect problems with your site, and they tell you what you can do to fix those problems. That's great, but don't get stuck overengineering. Think about what other tasks you can work on that have higher impact.

This post was originally published on trishalim.com.

Is anyone else too lazy to create blog post header images for each blogging platform?

Trisha Lim — Mon, 28 Mar 2022 03:27:15 +0000

I am currently posting my blog posts to 3 websites:

my own website
dev.to
hashnode

I'd like to post in even more platforms like Hackernoon and Medium.

I find it troublesome to create header images though. For each platform, I have to figure out the appropriate dimensions, then create an image on photoshop that works best for each.

Is anyone else having this problem, or is it just me?

I'm asking because I'm thinking about building a solution for it, so that we only spend 5-10 minutes making these images.

Thoughts? How do you create your images? Would you use a blog post header image generator or prefer to do it yourself using existing tools?

5 Actionable Steps to Becoming a Better Frontend Developer

Trisha Lim — Thu, 24 Mar 2022 09:26:54 +0000

Writing code and building a user interface that does what it’s supposed to do makes you a frontend developer. When you’ve delivered features, then you’ve done your job.

If you're aiming for "good enough", then you can stop here. But if you want to stand out, go the extra mile and delivery high quality work, then follow these steps.

1. Write reusable components. Duplicate code leads to inconsistency.

Sometimes you think to yourself, "It's only a few lines. I'm just gonna copy and paste this because creating a new component takes time." Then you end up with problems like:

Some buttons have a hover effect, and some don't.
Your borders are using a different shade of gray.
The spacing between your button label and icon are just a tad bit different.

Doesn't sound like a big deal, right?

You'll have these minor inconsistencies everywhere. They add up, and you'll end up with a website that just looks "off" and not clean.

2. Create a style guide.

A style guide is a documentation of your website design. It includes a list of components and their variations, typography styles, icons, color palette and anything else being reused. It helps you achieve a consistent look throughout your site.

If you already created reusable components, but you don't know what components already exist, then what's the point? You'll end up with different versions of the same thing anyway.

You can make it 100% your own like Starbucks, or you can use Storybook to speed things up. Storybook lets you change the parameters to your components through the UI, and you don't have to spend time designing your own pages.

Here's a peek at GitHub's different buttons. You can view the different sizes too. GitHub's Storybook is public, along with many others.

3. Pay attention to spacing.

If you're being told multiple times by designers to "move this 5 pixels to the right". Don't roll your eyes 🙄. They're asking you for good reason. A few pixels might not seem like a big deal, but it could be the difference between something looking "off" and just right. Remember, the small things add up.

Here's an example from Refactoring UI about bad spacing vs good spacing. In this example, there is too much space between elements. You might also end up with the opposite and get things too cramped up.

Here's an improved version. Much better!

The ratings are grouped closely together, which tells you that they're related. The ratings are also now closer to the title "50 customer reviews", so you know that this title is referring to the ratings below it. They belong together. "Review this product" and "share your thoughts" are also grouped together.

They go more in depth about spacing (and a lot more design topics) in the Refactoring UI book. This is a great "design for developers" book, and such an easy read!

4. Learn design.

As a frontend developer, you will work closely with designers. A good sense of design and an interest in design will let you do your job better.

A designer isn't gonna provide you 100% of the details you need. They might provide you with a mobile and desktop version, and sometimes tablet, but what about all those breakpoints in between? What about all the different states?

In an ideal world, you'll have most of the information. In reality, you will have to fill in the gaps and do what makes most sense. This is true for implementing functionalities and not just aesthetics.

You don't have to geek out about design if that's not a genuine interest that you have, but if it is, then be open about your interest and tell your designer teammates about some ideas you have or cool designs you've come across.

In return, they'll also be more open to sharing ideas with you. Together, you can improve the overall UX and create a product that you're both proud of.

5. Add subtle transitions.

I'm just gonna say it for the third time.. Small things add up. There are some small improvements you can make to a website. They're subtle and easy to implement.

For example, when changing a background color of a button, add a simple transition. Here's a transition I copied from Tailwind.

transition-property: color,background-color;
transition-timing-function: cubic-bezier(.4,0,.2,1);
transition-duration: .15s;

You can also add a shadow on hover, and move the element a few pixels up like in Rachel's portfolio site.

Or add an animation when your hamburger menu icon turns into a close icon, or when your arrow icon changes direction.

Summary

Frontend development is not just about coding and making things work. To deliver great UX, it takes attention to detail, consistency and a good sense of design.

Take inspiration from other websites. When you come across a website that you like, think about why you like it, and how you can apply that to your own work in the future. Keep learning, and enjoy the process!

Any tips you'd like to add? Share it in the comments below!

How to Make a Web Developer Portfolio in 2022

Trisha Lim — Tue, 01 Mar 2022 00:00:56 +0000

A portfolio website is a way to market your skills as a developer. It's like a resume, but 10x better. This article talks about what content should be included in your portfolio. This is the most important part.

Creating an entire website from scratch vs a resume in a PDF is a lot more effort though, so why do it?

The job market is competitive.

I've applied for hundreds of jobs. I've gone through multi-step application processes, spending hours and hours on technical exams only to get to the last step and get rejected. You can be a good fit and still not get the job, because this isn't just about how skilled you are as a developer, but also about how you're able to make companies believe that.

If you want a remote job, it gets even harder. According to this article by the founder of remoteok.io (one of the most popular job boards for remote jobs), the average remote job gets 34% more applicants than a regular job. The odds of getting a remote job are less than 1%. Out of hundreds of applicants, how can you stand out and be the one who gets the job?

This is not to discourage you. You can play the numbers game and apply for a lot of jobs, then increase your chances by improving your skills and marketing yourself well through your portfolio website. It's certainly possible. Or you can also build an online presence and grow your network, so that companies reach out to you rather than the other way around. Either way, it's crucial to have a website - one place where clients can learn about your experience, and why they should choose you over everyone else.

You can do this.

Creating your own website is a lot of work. I encourage you to make the simplest version of your site first - like an MVP, and you can iterate and add more content over time. One page is better than nothing.

Let's go over the different sections that your website MUST have, and some sections that are also great to have.

Don't be afraid to take inspiration from other web developer portfolios.

Full stack web developer portfolio examples

Frontend web developer portfolio examples

What to include in a portfolio website as a web developer

1. Hero Section

This is the first thing the reader sees on your website - kind of like a header. If they only had 1 minute to decide if they should keep reading or close the tab, what do you have to say?

The goal is to tell them that you are good at what you do, and you have the right experience that makes you a good fit for the job. For me, these are some points that are important to mention:

I'm an experienced frontend engineer.
I use React, Next.js and TypeScript.
I've done great work with a lot of companies.
I've worked remotely for years.

So if they are looking for a React developer for their remote team, it's possible that I am a great addition, and they keep scrolling to find out more.

2. List of Projects

They want someone to work on their project. If you've been successful doing something similar in the past, you might be be able to replicate that success for them. This is your proof of work.

So what have you worked on? Make a list of everything. Remember that big project where you added a few features and fixed some bugs, with 20 other people on the team? Yeah, write that down too.
Which one of these are you most proud of? Put that on top of the list.
Which ones did you enjoy working on the most? Put these on top as well, so that you are more likely to land on similar gigs.

3. Details for each project

What's the project? What was your contribution? What tech did you use? Add some links to see the demo and a Github repository (if public). Add some screenshots to make them curious. See this and this example.

4. Call to Action

The reader is interested in working with you. What should they do next? Email you, fill out a form, DM on twitter, etc. Make this stand out using a big button.

Some more (optional) things you can add that will help a lot...

These are great-to-haves. You don't have to add these, but if you do, it makes a big difference.

5. Experience/CV/ Resume

This is a timeline of your work experience throughout the years. Try to make this exactly the same as your LinkedIn profile's work experience section.

A list of your work history
For each role, what were you responsible for? What did you contribute? Any particular achievement there that stands out and maybe worth noting? Exaggerate a bit, especially if you're a minority. We tend to minimize our achievements, but now's the time to do the opposite.
Dates

6. Blog Posts

I was once told that I didn't have "proof" that I knew React. I had some projects using React, but none of them were open source, so I had no code to show them. I could have spent a week building a side project, but I was short on time. Instead, I spent a day writing an article about React Context.

Blogging is a great way to showcase your knowledge without building out an entire project. If you teach about a topic and do it well, your readers will think that you are an expert on said topic. If you're not an expert, that's totally okay. You just need to know a bit more than the person reading it.

7. Projects page grouped by skill

If a potential client is looking for someone experienced in, let's say, Ruby on Rails, then it would be great to have a page solely decided to "Ruby on Rails Projects". You already put in content for all your projects. Grouping them by tech/skill provides an easy way to find your relevant experience.

8. Services Offered

This is more applicable to freelancers who know what they want to work on. I have an interest in creating content-managed sites, so I explicitly offer this service.

9. Social Links

If you have a social media presence, add links here. Make sure there's not any red flags on there that will turn potential clients away.

Your own portfolio website is also a part of your portfolio.

Make sure your website is well-made, as this reflects on you. I once landed a freelance gig partly because the client loved my website! If you're not a designer, going for a clean and minimal design is the safer option. And be conscious about your Lighthouse score.

Web Developer Portfolio Template

I worked on my website for weeks, and I'm really proud of how it turned out! I decided to share it with you. If you don't wanna spend hours on end designing and coding, just use my template.

Do you already have a portfolio website? If so, share in the comments below! 🤩

CSS Tricks to Create that Dark Futuristic Web3 Look

Trisha Lim — Sun, 14 Nov 2021 01:28:49 +0000

This dark mode web3 aesthetic looks very cool and futuristic. They all have some common designs that achieve this look. Taking inspiration from The Graph, ARCx Money, Rabbithole, Sushi Swap, Buildspace (among others), here are some simple styles you can add to your app:

Gradient backgrounds
Glowing effect
Bright and white text over a dark background
Semi transparent backgrounds
A quick and easy transition on hover

Let's go through how we can apply these styles to texts, buttons and backgrounds.

In each of these examples, we have a dark background and white text over it. Let's start with some text styles.

Text styles to create the web3 look

Refer to this codepen.

1. Glow effect



<h1 class="text-glow">text glow effect</h1>



.text-glow {
  text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%);
}

You can use this effect for headings, or to emphasize a certain word in a heading, or as a hover effect for links. The Graph uses this effect a lot, and I'm here for it!

2. Gradient background effect



<h1><span class="text-gradient">text gradient effect</span></h1>



.text-gradient {
  background: linear-gradient(to right, #30CFD0, #c43ad6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Buildspace uses this style to emphasize words in a heading. Rare Blocks also uses it to emphasize words in a paragraph. The added bold font weight makes it stand out even more.

3. Combine the gradient and glow effect. Use the gradient to emphasize certain words in a phrase.



<h1 class="text-glow">
  <span class="text-gradient">text gradient</span> 
  with glow effect
</h1>

Now that we have some text effects, let's move on to buttons.

Button styles to create the web3 look

All these effects can be found in this codepen.

First, let's define the colors we'll be using. I'm going for purple. These are rgb colors that we will later on use with different opacity levels.



:root {
  /* violet */
  --primary-color: 111, 76, 255;

  /* white */
  --text-color: 256, 256, 256;
}

Let's also define the base styling of the button. We will add modifier classes later to create different styles.



<button class="btn">Button</button>



.btn {
  font-family: sans-serif;
  font-size: 18px;
  padding: 12px 32px;
  margin: 1rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  border-radius: 50px;
}

1. Glow on hover



<button class="btn btn-glow">Glow on Hover</button>



.btn-glow:hover {
  box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px;
}

Make sure to add a transition. A simple 0.3s transition makes a huge difference.



.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transition: all 0.3s ease;
}

2. A bright background with white text.

Let's also use the glow effect on this one.



.btn-primary {
  background-color: rgb(var(--primary-color));
  border: 1px solid rgb(var(--primary-color));
  color: rgb(var(--text-color));
}



<button class="btn btn-glow btn-primary">Primary Button</button>

3. A semi transparent background



.btn-semi-transparent {
  background-color: rgba(var(--primary-color), 0.15);
  border: 1px solid rgba(var(--primary-color), 0.25);
  color: rgba(var(--text-color), 0.8);
}

Let's make the colors a tiny bit brighter on hover. Again, this is a small change that actually makes a big difference in the experience.



.btn-semi-transparent:hover {
  background-color: rgba(var(--primary-color), 0.35);
  border: 1px solid rgba(var(--primary-color), 0.5);
  color: rgba(var(--text-color), 0.9);
}

Let's continue to use the glow effect.



<button class="btn btn-semi-transparent btn-glow">Semi Transparent Button</button>

See this in action on The Graph's landing page.

4. Gradient background



.btn-gradient {
  background-image: linear-gradient(to right, rgb(1 134 218), rgb(182 49 167));
  border: 0;
  color: rgba(var(--text-color));
}



<button class="btn btn-gradient btn-glow">Gradient Button</button>

This is probably the most common button styling that I see on web3 sites such as Sushi Swap and Buildspace.

5. Gradient border



.btn-gradient-border {
  color: rgb(var(--text-color));
  border: 2px double transparent;
  background-image: linear-gradient(rgb(13, 14, 33), rgb(13, 14, 33)), radial-gradient(circle at left top, rgb(1, 110, 218), rgb(217, 0, 192));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}



<button class="btn btn-gradient-border btn-glow">
  Gradient Border Button
</button>

This is inspired by ARCx Money and Sushi Swap.

Blurred Backgrounds to create the web3 look

Here's the code for reference.

For this, we are going to use this galaxy image from Unsplash. Swap this out to experiment.

First, let's create a card.



<div class="card">
  <h1>Some text here</h1>
</div>

These styles aren't necessary, except for position: relative.



.card {
  margin: 1rem;
  padding: 1rem;
  height: 300px;
  width: 300px;
  text-align: center;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 10px;
}

Let's add the image as a background.



.bg-blur {
  overflow: hidden;
}
.bg-blur::before {
  content: '';
  background-image: var(--bg-image);
  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}

Now, let's blur the image to create a gradient look using the filter property.



.bg-blur::before {
  filter: blur(30px);
}

In most cases, you don't need an image to achieve a similar effect. You can do it with a gradient background, which Buildspace does really well!

But with an image, you can have dynamic colors. Here's an example from The Graph. They take the logo, add the blur effect, set that as a background on the card and put the logo on top of it.

Rabbithole also uses this effect to match their hero background colors with their hero image. See how the background image is just a blurred version of the rabbit image on the right?

And there you have it! You can start shipping your next web3 project and achieve that web3 aesthetic. Don't forget that you can find all these here:

I hope you enjoyed and learned something from this article! If you'd like to see more of this, let me know in the comments. You can also learn more about me here or download my website template.

PS: I currently have availability for a frontend role and I'm saving that for a web3 project. 😉

Meanwhile, I'll leave you with this beauty that is ARCx's passport designs. 😍

React: How to create a reusable form using React Context

Trisha Lim — Sat, 25 Sep 2021 10:09:40 +0000

Forms are very common in web apps. We are going to be creating forms over and over again when working as a developer. What makes React fun is that we can take common patterns like this and turn them into reusable components, making our development life easier and our code shorter.

This is for those who already know:

React State
useState() hook

and would like to learn about React Context which "provides a way to pass data through the component tree without having to pass props down manually at every level." If you think Redux sucks, then keep reading, because Context is an alternative to Redux.

If you're having trouble, you can see the finished code here or leave a comment below.

Let's start by creating a React app.

You can create your own React app but I suggest cloning this repository instead. I added some CSS, since I will not be explaining that.
git clone https://github.com/trishalim/react-reusable-form-tutorial-boilerplate.git

Go into that directory and run npm install and npm start.

Creating a reusable component called FormInput

Create a new filed named FormInput.js with the following code:

import './FormInput.css';
import { useState } from 'react';

function FormInput(props) {
  const { label } = props;

  const [value, setValue] = useState('');
  const onChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div className="FormInput">
      <label>{label}</label>
      <input
        type="text" 
        value={value}
        onChange={onChange}
      />
    </div>
  )
}

export default FormInput;

This component has a custom label prop, and handles changing of the input value through a state.

Use this new component in App.js by adding the following code:

<FormInput label="First Name" />
<FormInput label="Last Name" />

Don't forget to import:
import FormInput from './FormInput';

You should end up with this:

It would be useful if our FormInput component can handle different types of fields. So let's add a type prop to allow for custom types.

function FormInput(props) {
  // Set default type to "text"
  const { label, type = 'text' } = props;

  const [value, setValue] = useState('');
  const onChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div className="FormInput">
      <label>{label}</label>
      <input
        type={type}
        value={value}
        onChange={onChange}
      />
    </div>
  )
}

Let's add email and password fields to App.js.

<FormInput label="Email Address" type="email" />
<FormInput label="Password" type="password" />

Yay! Now our FormInput can do a tiny bit more.

Moving state to App.js.

We want to be able to retrieve the values of the form. Currently, App has no way of knowing the current state of the form. Let's fix that.

Add a form state in App.

import { useState } from 'react';

const [form, setForm] = useState({
  firstName: '',
  lastName: '',
  emailAddress: '',
  password: ''
});

Add some new props to FormInput. Remove the state and change handlers in FormInput. These will be moved to the parent component App. You should end up with only this:

function FormInput(props) {
  const {
    label, 
    type = 'text', 
    name, 
    value, 
    onChange
  } = props;

  return (
    <div className="FormInput">
      <label>{label}</label>
      <input
        type={type}
        name={name}
        value={value}
        onChange={onChange}
      />
    </div>
  )
}

Since we just removed the value state and change handler from FormInput, we have to add these from App and pass them on as props instead.

<FormInput 
  label="First Name" 
  name="firstName" 
  value={form.firstName}
  onChange={handleFormChange} />

Do the same for Last Name, Email and Password fields.

<FormInput 
  label="Last Name" 
  name="lastName" 
  value={form.lastName}
  onChange={handleFormChange} />
<FormInput 
  label="Email Address" 
  type="email" 
  name="emailAddress" 
  value={form.emailAddress}
  onChange={handleFormChange} />
<FormInput 
  label="Password" 
  type="password" 
  name="password" 
  value={form.password}
  onChange={handleFormChange} />

Time to define our change handler handleFormChange. Here we are modifying form state, but only the field that changed. For example, if you type on the First Name field, form.firstName will be updated.

  const handleFormChange = (event) => {
    // Clone form because we need to modify it
    const updatedForm = {...form};

    // Get the name of the field that caused this change event
    // Get the new value of this field
    // Assign new value to the appropriate form field
    updatedForm[event.target.name] = event.target.value;

    console.log('Form changed: ', updatedForm);

    // Update state
    setForm(updatedForm);
  };

Now go into your browser and play around with the form. You should be able to see the changes reflected on your console as you type on any of the fields. That means our state in App is working!

With some ES6 magic, we can shorten this to:

const handleFormChange = (event) => {
  // Get the name of the field that caused this change event
  // Get the new value of this field
  const { name, value } = event.target;

  // Assign new value to the appropriate form field
  const updatedForm = {
    ...form,
    [name]: value
  };

  console.log('Form changed: ', updatedForm);

  // Update state
  setForm(updatedForm);
};

Now our code is still pretty long. 🙄 Great news: all this logic inside App for handling the form state can be reused too!

Creating a reusable Form component

Remember all that code we just added in App? Let's move all that to a new Form component.

import { useState } from 'react';
import './Form.css';

function Form(props) {
  const { children } = props;

  const [form, setForm] = useState({
    firstName: '',
    lastName: '',
    emailAddress: '',
    password: ''
  });

  const handleFormChange = (event) => {
    // Get the name of the field that caused this change event
    // Get the new value of this field
    const { name, value } = event.target;

    // Assign new value to the appropriate form field
    const updatedForm = {
      ...form,
      [name]: value
    };

    console.log('Form changed: ', updatedForm);

    // Update state
    setForm(updatedForm);
  };

  return (
    <form className="Form">
      {children}
    </form>
  );
}

export default Form;

We have the children props so that we can later on write something like:

<Form>
  <FormInput />
  <FormInput />
  <FormInput />
</Form>

which results to:

<form className="form">
  <FormInput />
  <FormInput />
  <FormInput />
</form>

App should NOT have any fields anymore, only the return statement. Remove form, setForm and handleFormChange. This will result into an error:

form and handleFormChange are now undefined, since we moved them to Form. We need to be able to access these fields somehow. This is where React Context comes in.

Use React Context to have access to form state and handleFormChange

Context provides another way to pass props to children, grandchildren, great grandchildren and so on - without having to pass them at every single level.

First, let's declare and initialize a Context in Form.js. Make sure to export this since we'll be using it in other components.

import React from 'react';

export const FormContext = React.createContext({
  form: {},
  handleFormChange: () => {}
});

These are the fields that we'd like to share to Form's children.

Pass them from Form to App by wrapping {children} in Form.js's return:

<FormContext.Provider value={{
  form,
  handleFormChange
}}>
  {children}
</FormContext.Provider>

With this, the children can access form and handleFormChange. In App, make to sure to import:
import Form, { FormContext } from './Form';

Wrap all the FormInput components:

<Form>
  <FormContext.Consumer>
    {({form, handleFormChange}) => (
      <>
        <FormInput 
          label="First Name" 
          name="firstName" 
          value={form.firstName}
          onChange={handleFormChange} />
        <FormInput 
          label="Last Name" 
          name="lastName" 
          value={form.lastName}
          onChange={handleFormChange} />
        <FormInput 
          label="Email Address" 
          type="email" 
          name="emailAddress" 
          value={form.emailAddress}
          onChange={handleFormChange} />
        <FormInput 
          label="Password" 
          type="password" 
          name="password" 
          value={form.password}
          onChange={handleFormChange} />
      </>
    )}
  </FormContext.Consumer>
</Form>

Notice that here we are using FormContext.Consumer. This means that we are consuming some data from FormContext. In Form, we were passing data, thus FormContext.Provider.

Check your browser and play around with the form. The state should be reflecting. You'll see this in the console just like before.

The behavior didn't change, but now our code is more reusable. And you've learned how to use Context! 🎉

Let's make our code shorter. More reusability!

Our code is still pretty long and repetitive. For every FormInput, we've had to write value={form.xxx} and onChange={handleFormChange}.

We can move this logic to FormInput. Instead of consuming FormContext in App, we can actually do that in FormInput. This is the great thing about Context compared to props. The fields become accessible down several levels.

In FormInput, let's use FormContext. This is another way to use a Context:

const formContext = useContext(FormContext);
const { form, handleFormChange } = formContext;

Don't forget to import:
import { useContext } from 'react';
import { FormContext } from './Form';

Now that we have access to the form state, we can set the input value from that:
value={form[name]}

And the change handler:
onChange={handleFormChange}

We no longer need value and onChange props here.

Your FormInput.ts should look like this:

import './FormInput.css';
import { useContext } from 'react';
import { FormContext } from './Form';

function FormInput(props) {
  const {
    label, 
    type = 'text', 
    name,
  } = props;

  const formContext = useContext(FormContext);
  const { form, handleFormChange } = formContext;

  return (
    <div className="FormInput">
      <label>{label}</label>
      <input
        type={type}
        name={name}
        value={form[name]}
        onChange={handleFormChange}
      />
    </div>
  )
}

export default FormInput;

Since FormInput now handles the use of FormContext, we can remove lots of code in App.js:

import './App.css';
import Form from './Form';
import FormInput from './FormInput';

function App() {
  return (
    <div className="App">
      <h1>Sign Up</h1>

      <Form>
        <FormInput 
          label="First Name" 
          name="firstName" />
        <FormInput 
          label="Last Name" 
          name="lastName" />
        <FormInput 
          label="Email Address" 
          type="email" 
          name="emailAddress" />
        <FormInput 
          label="Password" 
          type="password" 
          name="password" />
      </Form>
    </div>
  );
}

export default App;

Looking neat af! 🤩 Make sure it's still working as expected.

One last thing!

Currently, Form always has the same fields firstName, lastName, emailAddress, password. We need to be able to customize this.

In Form, add a new prop called formInitialValues and use that as a default state:
const [form, setForm] = useState(formInitialValues);

In App, make sure we're passing the new prop:

<Form formInitialValues={{
  firstName: '',
  lastName: '',
  emailAddress: '',
  password: ''
}}>

Great! Is it still working as expected? If so, let's proceed with adding another form.

Create another form, and see how much easier it is now!

Here's a login form that I created:

<Form formInitialValues={{
  username: '',
  password: ''
}}>
  <FormInput
    label="Username"
    name="username" />
  <FormInput
    label="password"
    name="Password"
    type="password" />
</Form>

And there you have it!

You can also download the finished code here.

You can continue adding more code to improve this:

Add a submit button.
Add a required boolean prop to FormInput. If there is no value, display an error message.
Custom validations and error messages.
Other input fields like <select>.

If you're having trouble in any of the steps, let me know below. I'd love to help you out!

If you enjoyed this and want to learn more about me, check out my website and download my website template.