DEV Community: Ioannis Potouridis

Leveling up a function 🍄

Ioannis Potouridis — Thu, 10 Jun 2021 06:22:24 +0000

Hello friends,

After almost a year of absence, I decided to start sharing again.

This is the story of a function that returned the first active and the first inactive user from a set of users e.g.:

const users = [
  {
    firstName: "Amy",
    lastName: "Effertz",
    id: "5778c2ac-b82f-45e6-8aa3-0b6d83e9a6bb",
    isActive: false,
  },
  {
    firstName: "Chaim",
    lastName: "Halvorson",
    id: "248a9de0-d8e8-4f8e-ac64-311185b47168",
    isActive: true,
  },
  {
    firstName: "Elyssa",
    lastName: "Konopelski",
    id: "f0917603-06fb-45d8-befc-e716319122b3",
    isActive: true,
  },
  {
    firstName: "Kendall",
    lastName: "Glover",
    id: "aae249e6-e36b-4889-a982-6babe17dd696",
    isActive: false,
  },
  {
    firstName: "Sigmund",
    lastName: "Eichmann",
    id: "f3505b2a-7e85-4994-b3c6-3b62a4b7f77c",
    isActive: false,
  }
];

The function looked like this.

function getOneActiveAndOneInactiveUser() {
  const active = users.find((user) => user.isActive);
  const inactive = users.find((user) => !user.isActive);

  return [active, inactive].filter((user) => typeof user !== "undefined");
}

It did exactly what it said.

It was also efficient because of how find works.

This is how most of the developers would have written it. 👌

Actually it is what most humans understand.

-I need to find one active and one inactive user.

But as you grow as a developer you start thinking in different terms.

-I need to find the first two opposite occurences in an array.

Notice that the first sentence is specific to users and especially their active status where the second one doesn't care that much of the source and condition which means that you can say it more times than the first.

So I started refactoring the function and the first iteration looked like this.

function getFirstOppositeOccurences() {
  let temp = {};

  for (let i = 0; i < users.length; i++) {
    if (users[i].isActive) {
      if (typeof temp[0] === "undefined") {
        temp[0] = users[i];
      } else {
        continue;
      }
    } else {
      if (typeof temp[1] === "undefined") {
        temp[1] = users[i];
      } else {
        continue;
      }
    }
  }

  return Object.values(temp);
}

Pretty uggly, right?

It has more lines of code than the first one, it is less readable, it uses a for like it's... 1999, it has a variable named temp like we are writting code in some kind of university, it has a lot of "if elses" and it still depends on the users and their isActive property. The only "cool" thing was the use of Object.values to create that array.

Another thing you do as you grow as a developer is finding patterns in code. So I looked my code again and especially my if blocks. They looked similar except from those 0 and 1 indices.

That 0 and 1 depended on that isActive condition. I needed to add my active user first and inactive second. A condition always returns a boolean so I immediately thought of casting that boolean to a number:

+true; // 1
+false; // 0

But I needed the truthy to be in 0 index so I stuck in the logical NOT operator.

+!true; // 0
+!false; // 1

The "outter" if was gone and the second iteration of the function looked like this.

function getFirstOppositeOccurences2() {
  let temp = {};

  for (let i = 0; i < users.length; i++) {
    const index = +!users[i].isActive;

    if (typeof temp[index] === "undefined") {
      temp[index] = users[i];
    } else {
      continue;
    }
  }

  return Object.values(temp);
}

The second if was simply checking to add a user entry only if it was not already merged to the temp object.

I used the word merged here instead of added as a hint. You can totally get rid of that if by turning your if to something like this.

for (let i = 0; i < users.length; i++) {
    const index = +!users[i].isActive;

    temp = { ...temp, ...(!temp[index] && { [index]: users[i] }) };
}

It is a one liner but is it readable?

I am not a huge fan of ternaries and there's a better way of clearing out "if else" conditions. You will still keep the if but it will work as a guard clause.

So in the third iteration, the function looked like this.

function getFirstOppositeOccurences() {
  let temp = {};

  for (let i = 0; i < users.length; i++) {
    const index = +!users[i].isActive;

    if (typeof temp[index] !== "undefined") continue;

    temp[index] = users[i];
  }

  return Object.values(temp);
}

We're getting somewhere with the readability and that nested 💩, but our function is still user dependent.

In order to make the function independent, instead of using the users array as a closure, I tried passing it as an argument.

function getFirstOppositeOccurences(array) {
  let temp = {};

  for (let i = 0; i < array.length; i++) {
    const index = +!array[i].isActive;

    if (typeof temp[index] !== "undefined") continue;

    temp[index] = array[i];
  }

  return Object.values(temp);
}

Do you see what is the problem here?

+!array[i].isActive;

That array may include anything now and the items probably won't have an isActive property.

So I needed to isolate that condition from the function. But how am I going to do that? If you notice that line there's an item that I need to access.

array[i]

If you go to that first function you'll notice that this is already implemented. Everyone is using array functions like find, map etc.

users.find((user) => user.isActive)

They all accept a callback function that provides us with each item per iteration, so this is answer for isolating the condition from my function.

My next iteration looked like this.

function getFirstOppositeOccurences(array, callbackFn) {
  let temp = {};

  for (let i = 0; i < array.length; i++) {
    const index = +!callbackFn(array[i], i, array);

    if (typeof temp[index] !== "undefined") continue;

    temp[index] = array[i];
  }

  return Object.values(temp);
}

The only thing changed is of course passing the callback as an argument and this line:

+!callbackFn(array[i], i, array)

I call it with the current item, the index and the original array. This gives a little bit of flexibility for the conditions you want to pass e.g.:

// get two users, one active and one inactive
getFirstOppositeOccurences(users, (user) => user.isActive);
// get two users, the third one (index === 2) and one that is not the third one
getFirstOppositeOccurences(users, (user, index) => index === 2);

Finally, I had to add some early escapes in the top of my function in order to avoid some bad paths.

if (array.length === 0) return [];
if (typeof array === "undefined") return [];
if (typeof callbackFn === "undefined") return [];

What do you think?

Do you think it leveled up? 🍄

Do you have any suggestions to improve this further?

I prefer to keep functions like the first but I enjoy practicing.

I hope you enjoyed reading this article too, and more happy if you learned something new or remembered something old.

I'm getting rid of Redux

Ioannis Potouridis — Sun, 06 Sep 2020 15:26:06 +0000

About ten months ago, I wrote an article about handling asynchronous requests in ReactJS.

That's a lot of boilerplate code (API functions, asynchronous actions, Thunk functions, reducers and the state selectors) just to render some asynchronous data, don't you think?

I accepted that asynchronous data doesn't belong to state and searched for other solutions.

The past month I'm experimenting with swr. I'm amazed on how much less effort is required for the same result. Even the UI feels better, faster and more responsive.

swr caches the data, then it provides the stale data first and re-validates to update the stale data if necessary.

Here's a demo I prepared.

I have included a one second delay for each request for you to notice that once a page is fetched, when you re-visit it you won't wait for that second because swr will first retrieve that page's data (stale) from the cache.

Asynchronous data was my biggest part of Redux state, and once that's been replaced, there's little shareable UI state. That can easily be replaced with React's Context API or I could use the promising Recoil.

It's good to know Redux but it's better to know when to replace it.

My one-liner event handler function for toggling check boxes state in ReactJS

Ioannis Potouridis — Sat, 22 Aug 2020 10:08:10 +0000

I am a ReactJS developer for over three years and every time I write an event handler function, a fairy dies... or one developer
scratches his head.

This is a post on how I shortened my toggling handler functions with the help of mathematics and utility libraries down to one line.

This is a typical ReactJS component which renders five names and each one is paired by a checkbox.

const names = ["Gale", "James", "Kim", "Mindy", "Karen"];

export function Names() {
  const [selected, setSelected] = React.useState(names);

  const handleToggle = (name) => () => {
    //
    //
  }

  return (
    <fieldset>
      <legend>Names</legend>
      {names.map((name) => (
        <React.Fragment key={name}>
          <input
            checked={selected.includes(name)}
            id={name}
            onChange={handleToggle(name)}
            type="checkbox"
          />
          <label htmlFor={name}>{name}</label>
          <br />
        </React.Fragment>
      ))}
    </fieldset>
  );
}

The most logical thing to do in our handleToggle event handler is to check the selected array and if it includes the name then it should filter that out, else it should add it to the array.

And the implementation should look like this:

const handleToggle = (clickedName) => () => {
  if (selected.includes(clickedName)) {
    setSelected(selected.filter((name) => name !== clickedName));
  } else {
    setSelected([...selected, clickedName]);
  }
};

This implementation is fine, it will pass code reviews any day due to readability.

But... I'm weird.

What if we change the clicked name into an array instead of a string and... return the symmetric difference of the two arrays?

For example, the symmetric difference of ["Gale", "James", "Kim", "Mindy", "Karen"] and ["Gale"] is ["James", "Kim", "Mindy", "Karen"]. It works like our filter, right?

Also the symmetric difference of ["James", "Kim", "Mindy", "Karen"] and ["Gale"] is ["James", "Kim", "Mindy", "Karen", "Gale"] which works like our array concatenation.

The symmetric difference can also be expressed with the XOR operator and as soon as I've read XOR and been a fan of utility libraries I started using the xor utility function.

Then the handler started looking like this:

// import xor from 'lodash/xor';

const handleToggle = (clickedName) => () => {
  setSelected(xor(selected, [clickedName]));
};

But like I said... I'm weird.

I read about ramda and lodash's fp and got curried away.

Every utility function exported from those two modules has reversed arguments (iteratee-first data-last) which means it can be called like this:

xor([clickedName], selected);

They are also auto-curried (did you catch the pun earlier?
) which means they can be written like this:

xor([clickedName])(selected);

Which means if you pass the first function as an argument to the setSelected action it will be called with the selected state anyway because set state actions accept callbacks that are called with the previous state.

So my handlers look like this now:

// import xor from 'lodash/fp/xor';

const handleToggle = (clickedName) => () => setSelected(xor([clickedName]));

What do you think?

Did you scratch your head?

Implementing common array methods with the reduce method

Ioannis Potouridis — Fri, 17 Jul 2020 16:15:15 +0000

Instead of inventing the CTRL-F for notebooks or the CTRL+Z of scissors I decided to do something more challenging and interesting. I am a developer. I write articles about array methods.

It's almost three years since I have started programming with JavaScript and I felt confident to say that you can replicate any array method with the reduce method.

The only caveat is that some of the methods return the first element when predicate returns true and you cannot escape the iteration of a reduce method, at least not the one that Array.prototype provides.

every is one of those methods. every checks if the callback (predicate) returns true for all elements (collection). Here is a lodish (Latin: lodashish) implementation with the reduce method:

function every(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    return predicate(curr, index, collection) && prev;
  }, true);
}

We set the initial value of the accumulator to true and check the current element AND the previous accumulated value (AND is true if and only if all of its operands are true).

Similar to every, some's iteration is stopped once predicate returns true, but it returns true if any of the element checks returns true. Here is its implementation:

function some(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    return predicate(curr, index, collection) || prev;
  }, false);
}

The initial accumulator's value is set to false and we check each element against the previous result using the OR operator (OR is true if any of its arguments are true).

filter and map seem to be more frequently used than every and some, which is why I feel we can skip their explanation. Here is the lodish implementation with the reduce method:

function filter(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    if (predicate(curr, index, collection)) {
      prev.push(curr);
    }

    return prev;
  }, []);
}

function map(collection, iteratee) {
  return collection.reduce((prev, curr, index) => {
    prev.push(iteratee(curr, index, collection));

    return prev;
  }, []);
}

find is another popular array method. It returns the first element that predicate returns true else it returns undefined.

function find(collection, predicate) {
  return collection.reduce((prev, curr, index) => {
    if (predicate(curr, index, collection)) {
      return prev || curr;
    }

    return prev;
  }, undefined);
}

Lastly, findIndex is like find but it returns the matched element's index instead of the element. It returns -1 otherwise.

function findIndex(array, predicate) {
  return array.reduce((prev, curr, index) => {
    if (predicate(curr, index, array)) {
      return index;
    }

    return prev;
  }, -1);
}

Form validation in React, as simple as it gets

Ioannis Potouridis — Tue, 14 Apr 2020 07:11:30 +0000

There are a lot of form or object schema validation libraries, such as react-hook-form, formik, yup to name a few. In this example we are not going to use any of them.

To start with, we are going to need a state to keep our values. Let's say the following interface describes our values' state.

interface Values {
  firstName: string;
  password: string;
  passwordConfirm: string;
}

And our form component looks like this.

const initialValues: Values = {
  firstName: '',
  password: '',
  passwordConfirm: '',
}

function Form() {
  const [values, setValues] = useState<Values>(initialValues);

  const handleChange = ({ target }: React.ChangeEvent<HTMLInputElement>) => {
    setValues((prev) => ({ ...prev, [target.name]: target.value }));
  };

  return (
    <form>
      <label htmlFor="firstName">First name</label>
      <input
        id="firstName"
        name="firstName"
        onChange={handleChange}
        type="text"
        value={values.firstName}
      />

      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        onChange={handleChange}
        type="password"
        value={values.password}
      />

      <label htmlFor="passwordConfirm">Confirm password</label>
      <input
        id="passwordConfirm"
        name="passwordConfirm"
        onChange={handleChange}
        type="password"
        value={values.passwordConfirm}
      />
    </form>
  )
}

All we need is an errors object that is calculated based on our current values' state.

const errors = useMemo(() => {
  const draft: { [P in keyof Values]?: string } = {};

  if (!values.firstName) {
    draft.firstName = 'firstName is required';
  }

  if (!values.password) {
    draft.password = 'password is required';
  }

  if (!values.passwordConfirm) {
    draft.passwordConfirm = 'passwordConfirm is required';
  }

  if (values.password) {
    if (values.password.length < 8) {
      draft.password = 'password must be at least 8 characters';
    }

    if (values.passwordConfirm !== values.password) {
      draft.passwordConfirm = 'passwordConfirm must match password';
    }
  }

  return draft;
}, [values]);

Then, you'd modify your JSX in order to display the error messages like so.

<label htmlFor="firstName">First name</label>
<input
  aria-describedby={
    errors.firstName ? 'firstName-error-message' : undefined
  }
  aria-invalid={!!errors.firstName}
  id="firstName"
  name="firstName"
  onChange={handleChange}
  type="text"
  value={values.firstName}
/>
{errors.firstName && (
  <span id="firstName-error-message">{errors.firstName}</span>
)}

Now the messages appear when we first see the form but that's not the best use experience that we can provide. In order to avoid that there are two ways:

Display each error after a user interacted with an input
Display the errors after user submitted the form

With the first approach we would need a touched state, where we keep the fields that the user touched or to put it otherwise, when a field loses its focus.

const [touched, setTouched] = useState<{ [P in keyof Values]?: true }>({});

const handleBlur = ({ target }: React.FocusEvent<HTMLInputElement>) => {
  setTouched((prev) => ({ ...prev, [target.name]: true }));
};

And our field would look like this.

<label htmlFor="firstName">First name</label>
<input
  aria-describedby={
    touched.firstName && errors.firstName
      ? 'firstName-error-message'
      : undefined
  }
  aria-invalid={!!touched.firstName && !!errors.firstName}
  id="firstName"
  name="firstName"
  onBlur={handleBlur}
  onChange={handleChange}
  type="text"
  value={values.firstName}
/>
{touched.firstName && errors.firstName && (
  <span id="firstName-error-message">{errors.firstName}</span>
)}

In a similar way, we would keep a submitted state and set it to true when a user submitted the form for the first time and update our conditions accordingly.

And, that's it!

It may be missing a thing or two, and may require you writing the handlers and the if statements for calculating the errors, but it's solid solution and a good start to validate forms in React.

The only pagination you'll ever need 1️⃣2️⃣3️⃣4️⃣5️⃣ (a React hook example)

Ioannis Potouridis — Sat, 01 Feb 2020 20:06:52 +0000

There are a lot of things to take into consideration when creating a table pagination component.

I never had the chance to use a ready one, but I assume that every pagination component or hook needs at least these in order to work.

interface UsePaginationProps {
  /** Total number of rows */
  count: number;
  /** The current page */
  page: number;
  /** How many rows per page should be visible */
  rowsPerPage: number;
  /** What are the provided options for rowsPerPage */
  rowsPerPageOptions: number[];
}

Then, it typically renders a dropdown in order to be able to choose one of the rowsPerPageOptions, the pages as links, with the current one usually highlighted and finally some buttons that navigate to first or last, previous or next page.

I don't care about the UI so I'll create a hook that says what I should (makes sense to) render at a given state e.g:

const state: UsePaginationProps = {
  count: 27,
  page: 2,
  rowsPerPage: 10,
  rowsPerPageOptions: [10, 30, 50]
}

I have 27 rows in total, I'm currently at the second page and I am viewing 10 rows. I should see 3 page options. I should also have a next and a previous button but I don't need a first or last button because I'm displaying all of the available page options at the moment ([1, 2, 3]: 1 is the first etc.).

I'll prepare the hook like this.

function usePagination({
  count,
  page,
  rowsPerPage,
  rowsPerPageOptions
}: UsePaginationProps) {
  return {};
}

export default usePagination;

I need to find out how many pages do I have to start with.

Given my current information, I can calculate that by dividing the number of total rows I have by the number of rows I am showing by page. It should look something like this.

const pageCount = Math.ceil(count / rowsPerPage);

The reason I have to round it upwards is simply because I don't want to miss any left overs.

With that, the hook should then be like this.

import { useMemo } from 'react';

function usePagination({
  count,
  page,
  rowsPerPage,
  rowsPerPageOptions
}: UsePaginationProps) {
  const pageCount = useMemo(() => {
    return Math.ceil(count / rowsPerPage);
  }, [count, rowsPerPage]);

  return { pageCount };
}

export default usePagination;

I'll continue by calculating the adjacent pages.

By the way, this example will always display 5 pages or less and the current page will always be in the middle unless I have reached each end (offset from center inc.).

To begin with, I'll create all the pages 1, 2, 3... n by writing the next line:

const value = Array.from(new Array(pageCount), (_, k) => k + 1);

I want to return the current page and the adjacent two on both sides.

With value containing all my pages, I can accomplish that with value.slice(page - 3, page + 2);

And the complete calculation (inc. checking the offsets) looks like this:

import { useMemo } from 'react';

function usePagination({
  count,
  page,
  rowsPerPage,
  rowsPerPageOptions
}: UsePaginationProps) {
  const pageCount = useMemo(() => {
    return Math.ceil(count / rowsPerPage);
  }, [count, rowsPerPage]);

  const pages = useMemo(() => {
    const value = Array.from(new Array(pageCount), (_, k) => k + 1);

    if (page < 3) {
      return value.slice(0, 5);
    }

    if (pageCount - page < 3) {
      return value.slice(-5);
    }

    return value.slice(page - 3, page + 2);
  }, [page, pageCount]);

  return { pageCount, pages };
}

export default usePagination;

I have all the information I need in order to render or not the navigation buttons but let's add the show rules and return them, why not?

import { useMemo } from 'react';

function usePagination({
  count,
  page,
  rowsPerPage,
  rowsPerPageOptions
}: UsePaginationProps) {
  const pageCount = useMemo(() => {
    return Math.ceil(count / rowsPerPage);
  }, [count, rowsPerPage]);

  const pages = useMemo(() => {
    const value = Array.from(new Array(pageCount), (_, k) => k + 1);

    if (page < 3) {
      return value.slice(0, 5);
    }

    if (pageCount - page < 3) {
      return value.slice(-5);
    }

    return value.slice(page - 3, page + 2);
  }, [page, pageCount]);

  const showFirst = useMemo(() => {
    return page > 3;
  }, [page]);

  const showNext = useMemo(() => {
    return pageCount - page > 0;
  }, [page, pageCount]);

  const showLast = useMemo(() => {
    return pageCount - page > 2;
  }, [page, pageCount]);

  const showPages = useMemo(() => {
    return pages.length !== 1;
  }, [pages.length]);

  const showPagination = useMemo(() => {
    return count >= Math.min(...rowsPerPageOptions);
  }, [count, rowsPerPageOptions]);

  const showPrevious = useMemo(() => {
    return page > 1;
  }, [page]);


  return {
    pages,
    showFirst,
    showNext,
    showLast,
    showPages,
    showPagination,
    showPrevious
  };
}

export default usePagination;

showPages: I don't need to display pages if I have a single page.

showPagination: I don't need to show the pagination if I have less rows than my minimum rowsPerPage option.

With that, if I use the example state like this:

const pagination = usePagination({
  count: 27,
  page: 2,
  rowsPerPage: 10,
  rowsPerPageOptions: [10, 30, 50]
});

I should get what I expect to see:

{
  "pages": [
    1,
    2,
    3
  ],
  "showFirst": false,
  "showNext": true,
  "showLast": false,
  "showPages": true,
  "showPagination": true,
  "showPrevious": true
}

🎶 Toss a coin to your... handler 💰

Ioannis Potouridis — Fri, 24 Jan 2020 15:56:07 +0000

I am not Eminem.

So, I am not good at saying 7.6 words per second.

I am a React developer.

I barely say 0 words per second.

I do 7.6 state updates per second.

I make To-do apps.

This is how I made my handlers more readable with use-immer.

This is my Todo component.

import React from 'react';

function Todo({ completed, onChange, onDelete, text }) {
  return (
    <div>
      <input
        checked={completed}
        name="completed"
        onChange={onChange}
        type="checkbox"
      />
      <input name="text" onChange={onChange} type="text" value={text} />
      <button onClick={onDelete}>Delete</button>
    </div>
  );
}

export default Todo;

This is my App component.

import React, { useState } from 'react';

import Todo from './Todo';

function App() {
  const [todos, setTodos] = useState([]);
  // const [todos, setTodos] = useImmer([]);

  // imagine handlers here

  return (
    <>
      {todos.map(({ completed, text }, index) => (
        <Todo
          completed={completed}
          key={index}
          onChange={handleTodoChange(index)}
          onDelete={handleTodoDelete(index)}          
          text={text}
        />
      ))}

      <button onClick={handleTodoAdd}>Add todo</button>
    </>
  ) 
}

export default App;

I need three handlers for:

Adding a new todo
Deleting a todo
Editing a todo (its status or text)

And I'm going to write three ways doing that:

The immutable way
Using immer's produce
Using useImmer hook from use-immer.

For people that are not familiar with immer,produce is a function that provides a draft for you to mutate and produces the next immutable state.

useImmer is similar to useState except that the updater function provides you the draft that can be mutated.

Adding a todo

The immutable way:

const handleTodoAdd = () => {
  setTodos(prev => [...prev, { completed: false, text: "" }]);
}

Using produce:

const handleTodoAdd = () => {
  setTodos(prev =>
    produce(prev, draft => {
      draft.push({ completed: false, text: "" });
    })
  );
}

Using useImmer:

const handleTodoAdd = () => {
  setTodos(draft => {
    draft.push({ completed: false, text: "" });
  });
}

Deleting a todo

The immutable way:

const handleDeleteClick = i => () => {
  setTodos(prev => prev.filter((_, j) => j !== i));
}

Using produce:

const handleDeleteClick = i => () => {
  setTodos(prev =>
    produce(prev, draft => {
      draft.splice(i, 1);
    })
  );
}

Using useImmer:

const handleDeleteClick = i => () => {
  setTodos(draft => {
    draft.splice(i, 1);
  });
}

Editing a todo

The immutable way:

const handleTodoChange = i => ({ target }) => {
  const value = target.type === "checkbox" ? target.checked : target.value;

  setTodos(prev =>
    prev.map((todo, j) => {
      if (j === i) {
        return {
          ...todo,
          [target.name]: value
        };
      }

      return todo;
    })
  );
};

Using produce:

const handleTodoChange = i => ({ target }) => {
  const value = target.type === "checkbox" ? target.checked : target.value;

  setTodos(prev =>
    produce(prev, draft => {
      draft[i][target.name] = value;
    })
  );
};

Using useImmer:

const handleTodoChange = i => ({ target }) => {
  const value = target.type === "checkbox" ? target.checked : target.value;

  setTodos(draft => {
    draft[i][target.name] = value;
  });
};

Probably the hottest code refactoring you ever saw 🔥

Ioannis Potouridis — Sat, 04 Jan 2020 12:38:51 +0000

I have some beliefs on programming.

I always re-write, re-think, research, re-invent and refactor.

That did cost me time in the beginning but now, it's not a problem.

Whilst doing that learned how and why things work in JavaScript.

I never settle, even if something works.

Everything matters, function names, variable names, even prop sorting.

I was doing a code review and reached to a function.

I need to mention here that refactoring took me no more than five minutes.

The function was responsible for formatting a given address depending on its country code.

E.g.

const address = {
  city: "Belgreen",
  countryCode: 'us',
  county: null,
  state: "Vermont",
  suburb: null,
  zip: "4636"
}

The implementation was the following.

const addressTextView = () => {
  const city = address.city;
  const state = address.state;
  const zip = address.zip;
  const suburb = address.suburb;
  const county = address.county;

  switch (address.countryCode) {
    case 'uk':
      return (
        (zip != null ? zip + ', ' : '') +
        (suburb != null ? suburb + ', ' : '') +
        (city != null ? city + ', ' : '') +
        (state != null ? state : '')
      );
    case 'us':
      return (
        (city != null ? city + ', ' : '') +
        (state != null ? state + ', ' : '') +
        (zip != null ? zip : '')
      );
    case 'nz':
      return (
        (zip != null ? zip + ', ' : '') +
        (city != null ? city + ', ' : '') +
        (county != null ? county + ', ' : '') +
        (state != null ? state : '')
      );
    default:
      return (
        (zip != null ? zip + ', ' : '') +
        (suburb != null ? suburb + ', ' : '') +
        (state != null ? state + ', ' : '') +
        (county != null ? county : '')
      );
  }
}

The first thing that bothered me was the ternaries in each case.

Then the repetition.

I started thinking of every return as an array of keys in different order.

I didn't care about null values.

I just started creating patterns.

//
  switch (address.countryCode) {
    case 'uk':
      return [zip, suburb, city, state].join(', ');
    case 'us':
      return [city, state, zip].join(', ');
    case 'nz':
      return [zip, city, county, state].join(', ');
    default:
      return [zip, suburb, state, county].join(', ');
//

Then, I saw the pattern and I created a function to handle each return.

const joinStrings = (...args) => args.join(', ');

And the switch looked like this.

//
  switch (address.countryCode) {
    case 'uk':
      return joinStrings(zip, suburb, city, state);
    case 'us':
      return joinStrings(city, state, zip);
    case 'nz':
      return joinStrings(zip, city, county, state);
    default:
      return joinStrings(zip, suburb, state, county);
//

Then I did something that amazed some people.

The way I filtered out null values from each array.

const joinStrings = (...args) => args.filter(Boolean).join(', ');

And final code was this.

const joinStrings = (...args) => args.filter(Boolean).join(', ')

const formatAddress = ({ city, county, countryCode, state, suburb, zip }) => { 
  switch (countryCode) {
    case 'uk':
      return joinStrings(zip, suburb, city, state);
    case 'us':
      return joinStrings(city, state, zip);
    case 'nz':
      return joinStrings(zip, city, county, state);
    default:
      return joinStrings(zip, suburb, state, county);
  }
};

My thoughts.

Both functions work. Business is happy.

It's OK to deliver it, but...

always try to improve and never settle if something works.

We had a function called addressTextView which was not very clear what it does. It also used the address object from the parent scope.

Then we had a lot of logic with ternaries which where not very clear to read at first either.

I renamed the function to formatAddress to be clear and passed the address object as an argument.

I isolated the logic to a different function named joinStrings. That function is independent from formatAddress and can be reused if necessary.

We also went from 45 lines of code down to 13. 😍

That's it.

I am not bragging, I'm trying to say it doesn't matter if it works but if you want to learn and grow as a developer there are a lot of ways to do that.

How I usually test my ReactJS components

Ioannis Potouridis — Fri, 27 Dec 2019 19:22:56 +0000

Introduction

What I like about @testing-library/react is that it encourages testing on what users see instead of how a component works.

Today, I had a fun with it and I wanted to share an example component along with its tests.

The component is a login form. For simplicity reasons I skipped the password input.

Show me the component first

To start with, I added the interface for its props.

interface LoginFormProps {
  initialValues: { email: string };
  onSubmit?: (values: { email: string }) => void;
}

The component expects some initialValues, we keep it simple with just the email here, and the onSubmit callback that can be called with our new values.

It renders a form with an input and a button element. Other than that, a form component usually includes at least two event handlers and a state.

The state's value derives from initialValues prop.

const [values, setValues] = useState(initialValues);

As you might have guessed, one event handler will use the set state action that have been destructured from the useState hook in order to update the form's state.

function handleChange({ target }: React.ChangeEvent<HTMLInputElement>) {
  setValues(prev => ({ ...prev, [target.name]: target.value }));
}

The other event handler should be called when the form is submitted and should call or not the onSubmit callback with the form's state.

const handleSubmit = useCallback(
  (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    onSubmit?.(values);
  },
  [onSubmit, values]
);

When a callback has dependencies I create a memoized version of it with the help of useCallback hook.

Let's get dirty...

Seriously, let's get a dirty variable in order to disable or not the button.

const dirty = useMemo((): boolean => {
  return values.email !== initialValues.email;
}, [initialValues.email, values.email]);

Again, when I have variables with computed values I tend to memoize them.

That's all...

// LoginForm.tsx

import React, { useCallback, useMemo, useState } from 'react';

export interface LoginFormProps {
  initialValues: { email: string };
  onSubmit?: (values: { email: string }) => void;
}

function LoginForm({
  initialValues,
  onSubmit
}: LoginFormProps): React.ReactElement {
  const [values, setValues] = useState(initialValues);

  const dirty = useMemo((): boolean => {
    return values.email !== initialValues.email;
  }, [initialValues.email, values.email]);

  function handleChange({ target }: React.ChangeEvent<HTMLInputElement>) {
    setValues(prev => ({ ...prev, [target.name]: target.value }));
  }

  const handleSubmit = useCallback(
    (event: React.FormEvent<HTMLFormElement>) => {
      event.preventDefault();

      onSubmit?.(values);
    },
    [onSubmit, values]
  );

  return (
    <form onSubmit={handleSubmit}>
      <input
        name="email"
        onChange={handleChange}
        placeholder="Email"
        type="email"
        value={values.email}
      />
      <button disabled={!dirty} type="submit">
        Login
      </button>
    </form>
  );
}

export default LoginForm;

Show me the tests

@testing-library helps us write user-centric tests, thus meaning the what user sees I mentioned in the beginning.

Here are some things that we need to test for this component.

The user sees a form with an input and a button.
The input displays the correct values.
The button should be disabled when the form is not dirty.
The form is working.

There are a lot of ways to write tests. jest provides us a variety of matchers and @testing-library a lot of query helpers.

Here's what I've come up with for the first case.

describe('LoginForm component', () => {
  it('renders correctly', () => {
    const initialValues = { email: '' };

    const { container } = render(<LoginForm initialValues={initialValues} />);

    expect(container.firstChild).toMatchInlineSnapshot(`
      <form>
        <input
          name="email"
          placeholder="Email"
          type="email"
          value=""
        />
        <button
          disabled=""
          type="submit"
        >
          Login
        </button>
      </form>
    `);
  });
});

A couple of things to note here, render is coming from @testing-library/react and it renders the component into a container div and appends it to document.body.

container is that div and we expect from the firstChild which is our form to match the inline snapshot.

Another way I would write this test would be:

// ...
const {
  getByPlaceholderText,
  getByText
} = render(<LoginForm initialValues={initialValues} />);

expect(getByPlaceholderText('Email').toBeInTheDocument();
expect(getByText('Login').toBeInTheDocument();
// ...

For the second item in our list I wrote the following tests.

describe('input element', () => {
  it('renders the default value', () => {
    const initialValues = { email: '' };

    const { getByPlaceholderText } = render(
      <LoginForm initialValues={initialValues} />
    );

    expect(getByPlaceholderText('Email')).toHaveValue('');
  });

  it('renders the correct value', () => {
    const initialValues = { email: '' };

    const { getByPlaceholderText } = render(
      <LoginForm initialValues={initialValues} />
    );

    fireEvent.change(getByPlaceholderText('Email'), {
      target: { value: 'laura.marshall@cowtown.io' }
    });

    expect(getByPlaceholderText('Email')).toHaveValue(
      'laura.marshall@cowtown.io'
    );
  });
});

@testing-library's render returns a variety of queries such as getByPlaceholderText which gives as access to the elements they find.

fireEvent on the other hand simply fires DOM events.

For example the following code fires a change event on our email input getByPlaceholderText('Email') and sets its value to laura.marshall@cowtown.io.

fireEvent.change(getByPlaceholderText('Email'), {
  target: { value: 'laura.marshall@cowtown.io' }
});

With that said, I tested that our input renders the initial value and also updates properly.

I then test the accessibility of the user to the Login button.

I used another amazing query getByText to find my button and changed my input's state by firing an event like my previous test.

describe('submit button', () => {
  it('is disabled when the form is not dirty', () => {
    const initialValues = { email: 'laura.marshall@cowtown.io' };

    const { getByText } = render(<LoginForm initialValues={initialValues} />);

    expect(getByText('Login')).toBeDisabled();
  });

  it('is enabled when the form is dirty', () => {
    const initialValues = { email: '' };

    const { getByPlaceholderText, getByText } = render(
      <LoginForm initialValues={initialValues} />
    );

    fireEvent.change(getByPlaceholderText('Email'), {
      target: { value: 'laura.marshall@cowtown.io' }
    });

    expect(getByText('Login')).toBeEnabled();
  });
});

Finally I tested the button's functionality.

I created a mock function for my submit handler and tested that it is called with our new values when the Login button is pressed.

describe('submit button', () => {
  // previous tests

  it('calls handleSubmit with the correct values', () => {
    const initialValues = { email: '' };
    const handleSubmit = jest.fn();

    const { getByPlaceholderText, getByText } = render(
      <LoginForm initialValues={initialValues} onSubmit={handleSubmit} />
    );

    fireEvent.change(getByPlaceholderText('Email'), {
      target: { value: 'laura.marshall@cowtown.io' }
    });

    fireEvent.click(getByText('Login'));

    expect(handleSubmit).toHaveBeenCalledWith({
      email: 'laura.marshall@cowtown.io'
    });
  });
});

How do you handle asynchronous requests in ReactJS?

Ioannis Potouridis — Sat, 23 Nov 2019 13:56:39 +0000

Hey! 👋

With React Suspense being far from reality (stable) I wanted to make a

short article to show you how I currently handle my asynchronous requests

in ReactJS, and hopefully exchange opinions in the comment section.

I know that there are a lot of hooks for fetching resources out there.

I'm a big fan of hooks but I don't find this approach much versatile yet.

To start with, I create a wrapper function for fetch usually in a

helpers.ts file.

// helpers.ts

/**
 *
 * @param {RequestInfo} input
 * @param {RequestInit} [init]
 * @returns {Promise<T>}
 */
export async function createRequest<T>(
  input: RequestInfo,
  init?: RequestInit
): Promise<T> {
  try {
    const response = await fetch(input, init);
    return await response.json();
  } catch (error) {
    throw new Error(error.message);
  }
}

Nothing fancy here.

Where I work, we usually implement filtering, sorting and pagination in

the back-end so most of my API related functions expect key/value pairs

as search parameters. This is how I do it.

// userApi.ts
const { HOST, SCHEME } = process.env; 

const PATH = 'api/v1/users';

export interface User {
  createdAt: string;
  email: string;
  firstName: string;
  id: number;
  lastName: string;
  updatedAt: string;
}

/**
 *
 * @param {Record<string, string>} [init]
 * @returns {Promise<User[]>}
 */
export function fetchUsers(
  init?: Record<string, string>
): Promise<User[]> {
  const searchParams = new URLSearchParams(init);
  const QUERY = searchParams.toString();
  const input = `${SCHEME}://${HOST}/${PATH}?${QUERY}`;

  return createRequest<User[]>(input);
}

I recently started using URLSearchParams in order to construct

my query strings, thus being declarative.

Next, I prepare my actions and reducer.

In order to handle my async actions in Redux I create a middleware to

handle async payloads and dispatch separate actions for each state of

the async action. To keep it short, I'll use redux-promise-middleware.

It does exactly that.

With that, here's how the actions.ts file looks.

// actions.ts
import { FluxStandardAction } from "redux-promise-middleware";

import * as userApi from './userApi';

/**
 *
 * @param {Record<string, string> | undefined} [init]
 * @returns {FluxStandardAction}
 */
export function fetchUsers(
  init?: Record<string, string>
): FluxStantardAction {
  return {
    type: 'FETCH_USERS',
    payload: userApi.fetchUsers(init)
  }
}

Remember, our middleware will transform the actions that have async

payload and will dispatch separate fulfilled, rejected and pending actions.

This is how I handle those actions.

// reducer.ts
import { FluxStandardAction } from "redux-promise-middleware";

import { User } from './userApi'; 

export interface UserListState {
  users: User[];
  usersPending: boolean;
}

const initialState: UserListState {
  users: [];
  usersPending: false;
}

/**
 *
 * @param {UserListState} state
 * @param {FluxStandardAction} action
 * @returns {UserListState}
 */
function userList(
  state: UserListState = initialState,
  action: FluxStandardAction
): UserListState {
  switch(action.type) {
    case "FETCH_USERS_FULFILLED":
      return {
        ...state,
        users: action.payload.users,
        usersPending: false
      }
    case "FETCH_USERS_PENDING":
      return {
        ...state,
        usersPending: true
      }
    case "FETCH_USERS_REJECTED":
      return {
        ...state,
        usersPending: false
      }
    default:
      return state;
  }
}

export default userList;

I then create the selector functions in order to extract data

from the Redux store state.

// selectors.ts
import { State } from '../wherever/this/guy/is';
import { User } from './userApi';

/**
 *
 * @param {State} state
 * @returns {User[]}
 */
export function usersSelector({ userList }: State): User[] {
  return userList.users;
}

/**
 *
 * @param {State} state
 * @returns {boolean}
 */
export function usersPendingSelector({ userList }: State): boolean {
  return userList.usersPending;
}

Finally, I create the React component in order to display the users.

// user-list.tsx
import React, { useEffect, useState }  from 'react';
import { useDispatch, useSelector } from 'react-redux'; 

import { fetchUsers } from './actions'; 
import { stringifyValues } from './helpers'; // it does what it says
import { usersSelector, usersPendingSelector } from './selectors';

type Params = Record<string, number | string>;

const initialParams: Params = {
  limit: 10,
  page: 1
};

/**
 *
 * @returns {JSX.Element}
 */
function UserList(): JSX.Element {
  const dispatch = useDispatch();
  const users = useSelector(usersSelector);
  const usersPending = useSelector(usersPendingSelector);
  const [params, setParams] = useState<Params>(initialParams);

  useEffect(() => {
    dispatch(fetchUsers(stringifyValues(params));
  }, [dispatch, params];

  // Nothing fancy to see here except 
  // some handlers that update the params 
  // e.g. setParams(prev => ({ ...prev, page: 2 }));
  // and some conditional rendering.
}

export default UserList;

👨‍🔬 I tried experimental React and... 💥💥💥

Ioannis Potouridis — Sun, 03 Nov 2019 14:11:31 +0000

Hey! 👋

I hope everyone is doing great!

I finally found some time to play with the new experimental React features and especially with Suspense for Data Fetching.

If you are interested in how things work I suggest that you read this first.

Introduction

We all have components that make asynchronous API calls in order to fetch data.

These components usually look like this:

// UserList.js

import React, { useEffect, useState } from "react";

import { fetchUsers } from "./userApi";

function UserList() {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  if (!users) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {/*  */}
    </ul>
  );
}

UserList component will render out Loading... and fetch the users after that.

React's new features will help us achieve two things.

Avoid writing boilerplate logic for the UI when our data are not ready
Fetch as soon as possible

Installation

In order to experiment with the new features you need to have experimental react and react-dom installed in your project.

npm i react@experimental react-dom@experimental

The very next thing you need to do is make the following changes to your index.js.

//index.js

import React from "react";
// import { render } from "react-dom";
import { createRoot } from "react-dom";

import App from "./App.js";

// render(<App />, document.getElementById("root");
createRoot(document.getElementById("root")).render(<App />);

Example

We need two things to start with:

The Suspense component from React to wrap our component.
A function ¹ that will tell our data's state to that Suspense component.

Imagine that this function looks like this.

// helpers.js

export function wrapPromise(promise) {
  // There's no actual magic in it 🧙‍♂️
}

I'm not proud of this part but... here's how I used it.

// userApi.js

import { wrapPromise } from "./helpers";

export function fetchUsers() {
  // I intentionally used https://reqres.in for that delay
  const input = "https://reqres.in/api/users?delay=1";

  return wrapPromise(fetch(input).then(value => value.json()));
}

Then I used this component in order to render each user.

// UserListItem.js

import React from "react";

function UserListItem({ email, first_name, id, last_name }) {
  return (
    <li key={id}>
      <span>
        {first_name} {last_name}
      </span>
      <p>{email}</p>
    </li>
  );
}

export default UserListItem;

Then I simply wrapped my component that contains the data with Suspense.

// App.js
import React, { Suspense } from "react"; 

import UserList from "./UserList";

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <UserList />
    </Suspense>
  );
}

export default App;

And finally...

// UserList.js

import React from "react";

import { fetchUsers } from "./userApi";
import UserListItem from "./UserListItem";

const resource = fetchUsers();

function UserList() {
  const { data: users } = resource.read();

  return <ul>{users.map(UserListItem)}</ul>;
}

export default UserList;

Conclusion

My conclusion is that we went from a component that was:

responsible for fetching the data
fetching the data after rendering
handling the UI while the data wasn't ready
rendering the data when they were ready

to a component that is:

rendering the data

You can find the complete example here.

There aren't any implementations to integrate with Suspense yet (except Relay I think). We have to ~~copy paste from here~~ 😂 write our own function at the moment. ↩

How I think when I write a React component. 🤔

Ioannis Potouridis — Sat, 02 Nov 2019 11:13:16 +0000

This is going to be a short demonstration on how I usually think when I write a React component.

So, let's say that I want to create a form component.

I don't care what fields the form will have at the moment.

import React from 'react';

function Form() {
  return (
    <form>
      {/*  */}
    </form>
  ) 
}

export default Form;

I want to add a firstName field.

import React, { useState }  from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');

  const handleFirstNameChange = ({ target }) => {
    setFirstName(target.value);
  }

  return (
    <form>
      <div>
        <label htmlFor="firstName">First name</label>
        <div>
          <input
            id="firstName"
            onChange={handleFirstNameChange}
            type="text"
            value={firstName}
          />
        </div>
      </div>
    </form>
  ) 
}

export default Form;

Looking good. 😎

I want to add a lastName field.

import React, { useState }  from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleFirstNameChange = ({ target })  => {
    setFirstName(target.value);
  }

  const handleLastNameChange = ({ target }) => {
    setLastName(target.value);
  }

  return (
    <form>
      <div>
        <label htmlFor="firstName">First name</label>
        <div>
          <input
            id="firstName"
            onChange={handleFirstNameChange}
            type="text"
            value={firstName}
          />
        </div>
      </div>

      <div>
        <label htmlFor="lastName">Last name</label>
        <div>
          <input
            id="lastName"
            onChange={handleLastNameChange}
            type="text"
            value={lastName}
          />
        </div>
      </div>
    </form>
  ) 
}

export default Form;

Adding that second field was way easier.

I used my copy paste powers.

I want to add an email field.

I shall use my powers once again. 🐱‍🏍

import React, { useState }  from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');

  const handleFirstNameChange = ({ target }) => {
    setFirstName(target.value);
  }

  const handleLastNameChange = ({ target }) => {
    setLastName(target.value);
  }

  const handleEmailChange = ({ target }) => {
    setEmail(target.value);
  }

  return (
    <form>
      <div>
        <label htmlFor="firstName">First name</label>
        <div>
          <input
            id="firstName"
            onChange={handleFirstNameChange}
            type="text"
            value={firstName}
          />
        </div>
      </div>

      <div>
        <label htmlFor="lastName">Last name</label>
        <div>
          <input
            id="lastName"
            onChange={handleLastNameChange}
            type="text"
            value={lastName}
          />
        </div>
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <div>
          <input
            id="email"
            onChange={handleEmailChange}
            type="email"
            value={email}
          />
        </div>
      </div>
    </form>
  ) 
}

export default Form;

...

Then I want to add a password field.

...

Then I want to add another field.

...

STOP! 🤚

Every new field translates into these three changes:

Adding a state and set state action for the field
Adding a new event handler for the input
Adding the HTML for the field

It's time for me now to use my real powers.

I'll attempt to decrease the number of changes that occur.

I don't want to add a new event handler for every input.

The only thing that changes in every event handler is the action that gets called.

I'll pass that as an argument.

import React, { useState }  from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');

  const handleChange = setStateAction => ({ target }) => {
    setStateAction(target.value);
  }

  return (
    <form>
      <div>
        <label htmlFor="firstName">First name</label>
        <div>
          <input
            id="firstName"
            onChange={handleChange(setFirstName)}
            type="text"
            value={firstName}
          />
        </div>
      </div>

      <div>
        <label htmlFor="lastName">Last name</label>
        <div>
          <input
            id="lastName"
            onChange={handleChange(setLastName)}
            type="text"
            value={lastName}
          />
        </div>
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <div>
          <input
            id="email"
            onChange={handleChange(setEmail)}
            type="email"
            value={email}
          />
        </div>
      </div>
    </form>
  ) 
}

export default Form;

I'll try to add that password field now.

import React, { useState }  from 'react';

function Form() {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleChange = setStateAction => ({ target }) => {
    setStateAction(target.value);
  }

  return (
    <form>
      <div>
        <label htmlFor="firstName">First name</label>
        <div>
          <input
            id="firstName"
            onChange={handleChange(setFirstName)}
            type="text"
            value={firstName}
          />
        </div>
      </div>

      <div>
        <label htmlFor="lastName">Last name</label>
        <div>
          <input
            id="lastName"
            onChange={handleChange(setLastName)}
            type="text"
            value={lastName}
          />
        </div>
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <div>
          <input
            id="email"
            onChange={handleChange(setEmail)}
            type="email"
            value={email}
          />
        </div>
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <div>
          <input
            id="password"
            onChange={handleChange(setPassword)}
            type="password"
            value={password}
          />
        </div>
      </div>
    </form>
  ) 
}

export default Form;

OK, looking a bit better.

I think I can cross that out from the list.

Adding a state and set state action for the field
~~Adding a new event handler for the input~~
Adding the HTML for the field

I don't want to add a new state and set state action for every field.

I'll update the event handler since I'll use one set state action.

I'll also add a name property to those inputs.

import React, { useState }  from 'react';

function Form() {
  const [values, setValues] = useState({});

  const handleChange = ({ target }) => {   
    setValues(prev => ({ ...prev, [target.name]: target.value })); 
  }

  return (
    <form>
      <div>
        <label htmlFor="firstName">First name</label>
        <div>
          <input
            id="firstName"
            name="firstName"
            onChange={handleChange}
            type="text"
            value={values.firstName || ''}
          />
        </div>
      </div>

      <div>
        <label htmlFor="lastName">Last name</label>
        <div>
          <input
            id="lastName"
            name="lastName"
            onChange={handleChange}
            type="text"
            value={values.lastName || ''}
          />
        </div>
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <div>
          <input
            id="email"
            name="email"
            onChange={handleChange}
            type="email"
            value={values.email || ''}
          />
        </div>
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <div>
          <input
            id="password"
            name="password"
            onChange={handleChange}
            type="password"
            value={values.password || ''}
          />
        </div>
      </div>
    </form>
  ) 
}

export default Form;

OK, I'll cross that one out as well.

~~Adding a state and set state action for the field~~
~~Adding a new event handler for the input~~
Adding the HTML for the field

This is me going berserk now.

import React, { useState }  from 'react';

const fields = [
  {
    id: 'firstName',
    label: 'First name',
    name: 'firstName',
    type: 'text'
  },
  {
    id: 'lastName',
    label: 'Last name',
    name: 'lastName',
    type: 'text'
  },
  {
    id: 'email',
    label: 'Email',
    name: 'email',
    type: 'email'
  },
  {
    id: 'password',
    label: 'Password',
    name: 'password',
    type: 'password'
  }
];

function Form() {
  const [values, setValues] = useState({});

  const handleChange = ({ target }) => {   
    setValues(prev => ({ ...prev, [target.name]: target.value })); 
  }

  return (
    <form>
      {fields.map(({ id, label, name, type }, index) => (
        <div key={index}>
          <label htmlFor={id}>{label}</label>
          <div>
            <input
              id={id}
              name={name}
              onChange={handleChange}
              type={type}
              value={values[name] || ''}
            />
          </div>
        </div>
      ))}
    </form>
  ) 
}

export default Form;

Well, now when I want to add a field, I just add one in my fields array. 😁

~~Adding a state and set state action for the field~~
~~Adding a new event handler for the input~~
~~Adding the HTML for the field~~

What do you think?