Forem: Paul Dumebi

Custom multi-select dropdown with search function React (Part 1)

Paul Dumebi — Sat, 02 Mar 2024 19:36:18 +0000

When building websites and web applications, you do not have enough space to display all your content. To maximize space, you can use dropdown menus.

A dropdown is a list of choices that can only be seen if a user interacts with it, either by clicking on it or by moving their mouse over it. The menu options then vertically descend and vanish after the user leaves the menu. The typical html select dropdown has some drawbacks. For instance, if we were to pass 50–100 items, the list will fill the entire screen and even overflow; If we remembered a name among the options and couldn't immediately perform a search for it, we would have to continue scrolling down the page. in which case the user experience would be poor. Additionally, it is impossible to add items like checkboxes to your options.

In this post, you'll learn how to build a custom scrollable dropdown with a checkbox for selection and a search functionality to quickly search for anything among the options.

We will be using some popular libraries like

Chakra-ui/react: A great UI library I would recommend anytime. It gives you the building blocks you need to build your React applications. I should probably do an article on this as well.
lodash.debounce: This essentially delays a function until a set time has passed. This will be used to prevent re-rendering in our React application on every keystroke but instead after a set time has passed. We will use it even if our data set won't be too big.

These packages will improve the project's visual appeal, but everything will be custom done. Let's start a simple React project now and install the packages mentioned above. You can do this however you want with vite or npx the choice is yours. We will go ahead and create a component that we will call InputDropdown and use it to create our input with some simple styling as you will see in the code snippet below

Creating our custom hook to display our dropdown

To display the drop-down when the user focuses on the newly created input and hide it when the input is no longer being focused, we would need to develop a custom hook in React. We can always identify when the input is focused because we can access its "onFocus" attribute, but we are unable to determine when a click outside the input has taken place which prevents us from hiding the drop-down. This hook we are about to write will help us listen for clicks outside of the input and give us a true or false state, which we can use to hide or show our drop-down. Below is the code.

Our Dropdown

The next step is to write the code for our drop-down and use the hook we previously created to display and hide it. The dropdown will have a maximum height and all other list items will be scrollable after that. Some other stylings added here were to give our options hover state on hover, box-shadow etc.

The dropdown appears, as you can see, but it is largely empty. Let's develop a checkbox component that will be shown as a selection in the dropdown menu.

To represent the values of the checkbox we just created, we are going to create a dummy array with random values. This dummy data will be created in a separate file and imported in our parent component which will be supplied as a prop into our InputDropdown component. Since you would typically wish to send data from the parent to the child in a real-world scenario. Using the dummy array we just made, import the checkbox into the InputDropdown component and map through it to produce the result below.

One last thing we will do in this lesson is add the ability to search through the options. Which is why we installed lodash.debounce at the beginning. We are going to pass an onChange handler to our input and perform our ability to search through that function. The prop itself can be used to filter when a user tries to search because it will still have all of the original items in the array. However, we can do something before that by having a state that contains our prop and use that to map through the checkbox. We will make use of the lodash that we initially installed so that there is a 500-millisecond delay between each keystroke and the search. You would want to do this in a real-world situation since it improves performance.

Here is what our full component should look like. In the next article, we are going to make our selected checkboxes show in our input and have the ability to select and unselect all.

Here is the link to the full codesandbox
https://codesandbox.io/s/custom-multi-select-dropdown-with-search-function-react-part-1-w3txti

Thank you, and that concludes this article. I sincerely hope you liked it. If you did or did not, leave a comment or like.

Dynamic forms with validation React + Formik

Paul Dumebi — Fri, 07 Oct 2022 11:06:16 +0000

So recently, I was asked to implement a feature in React where users can add up to three pieces of information during registration. I said to myself, this shouldn't be a problem, until I realized I had to validate each input so as not to enable users to submit an empty form. I am a big fan of using formik and yup as validation, so I had to read up formik documentation and I came across a very easy way of doing it, which I'll be sharing. By the way, it is not that much different from react-hook form.

Set up your react project, install formik, and yup. Formik is a small library that helps you with the 3 most annoying parts:

Getting values in and out of the form state
Validation and error messages
Handling form submission

While Yup is a JavaScript schema builder for value parsing and validation. Proceed to create each part of the application as a component. Create your input component within your project. You will need to import errorMessage along with the input from formik. is a component that renders the error message of a given field if that field has been visited. It expects that all error messages are stored for a given field as a string.

Create the yup schema, which will be used to validate the form.

Create initial values, which will be passed into the formik form as the default values of all input fields. The initial values should be in from of key-value pair, the key will be passed down to formik field array which will enable us to create inputs on the fly as shown in the image below

Now to the main application itself. Create the form, and give it some styling just to make it look good. Use the formik wrapper to wrap the form, import, and pass your initial values and validation into the formik wrapper. import fieldArray from formik as this is what is going to be used to create the dynamic form. It accepts a name property, the name should be the same as the key used for the initial values. Destructure values and set values from FormikProps, which you will have access to inside the form. We will use values to display a close button when the form length is greater than one. setValues will be used to increase the length of the form.

Each input will need a name for formik to identify them individually. We will be creating 3 inputs: one for module name, transcript, and description; and two buttons to add more and submit. When a user clicks on "add more", we want to create another form with the same three inputs. Each input needs a unique name, which formik will use for validation. You will need to map through the values. Remember that initial values are in the key-value pair, map through values, and access the key of the initial values. We will need access to the index as well, so endeavor to pass that to the map function. Because each input needs a unique name, which must be created dynamically, pass the key of initial values concatenated with the index and the value in the initial values. Here is a code snippet of what your component should look like,

When the user clicks on add more, we display a close button for each form and when the length is one we hide the close button. In our add more and close buttons, we are going to be create two functions, one to increment the form and the other to delete a form.
For our add more, we will create a function updateForm which we will pass in values and set values as arguments into the function. We will have access to the current values and we will be able to increment them using set values. While for our function to delete a form we will be passing the index along with values and set values, which will enable us to track which form the user wants to close check below for the functions

With the above functions when a user now clicks add more a new form will be pushed into the current array setValues will help us re-render it so as to have the newly added form and when the user clicks on close the delete function will help users remove the particular form the user wants to close. A final function we will need is a submit function. In formik a button without a type is treated as a type of submit which formik will tie to its handleSubmit, so all we need is a button with or without a type of submit. Formik directly gives us access to the values in the handleSubmit and when clicked formik also runs the validation and creates schemas for each form.

If no errors, you have the values in an array of objects. Thanks for reading.

Here is a link to the full code on my code-sandbox
https://codesandbox.io/s/affectionate-bartik-ugezfx?file=/src/app.js

The power of a good community

Paul Dumebi — Wed, 21 Sep 2022 07:28:08 +0000

If you're just starting out in tech, then you need to read this.

Shortly before I transitioned into tech, I always had this imposter syndrome. I didn't feel I was good enough. I thought people working for trillion-dollar companies and the like were like superhumans. To begin with, I didn't even own or know how to operate a laptop well until my final year in school. This made me think I wasn't good enough to be in tech. But one of the things that kept me going was my group of friends.

It was tough when starting out, especially for someone like me who took the path of self-learning. There were just too many resources that sometimes I felt overwhelmed. I wanted to learn everything to be at the level that I'd get into the big tech companies, I thought. The electricity situation wasn't any better. I could remember then that the power holding companies were more likely to restore power at night than at day, so I'd have to be awake mostly at night. It still helped to an extent because I could barely afford a data plan during the day to enable me to stream content on YouTube and the like, so I'd do night plans, which were relatively affordable some days thanks to the Telco anyway, but the constant battle with trading my sleep for learning was becoming tiring. Also, I had one of those laptops that would take an eternity to process a command, and it was very frustrating.

There were many reasons to give up in my head. Some days I did give up, but thanks to my friends and brothers who were in tech, they still pushed me. They were days we'd meet and they would just be talking tech and I couldn't contribute enough, so I'd feel challenged to go back and learn more. Luckily for me, it was the peak of COVID, so we were all home and I was disengaged from my place of primary assignment due to reality. All of these kept me going. They encouraged me to apply for internships and told me that I was never going to be too ready if I kept waiting. I landed my first tech internship, and from there it was another learning curve.

The essence of this post is that if you're just starting out in tech, do not underestimate the power of having a community of tech friends. Tech can be tiring and overwhelming when starting out. You'll always have that imposter syndrome that you're not good enough, so giving up will always be imminent, but if you have a good community, you'll always find a way of pushing through or coming back. Also, have a niche. Don't try to learn everything. There are too many resources out there, but pick the ones that belong to your niche. Having a mentor can help in this aspect as well. Never wait to be too ready before you start applying for jobs and internships. If you attend the interview and fail, they'd also teach you something.

Introduction

Paul Dumebi — Sun, 19 Jul 2020 10:18:57 +0000

Hi, I'm new here. Just started out learning web development a year ago. It's been a pretty amazing journey so far. I hope to connect and learn from great minds here. If you could point me to any materials that'd be of help be sure that I'll be grateful.