REUSABLE COMPONENTS IN REACT
by Jackattack
Perhaps one of my favorite aspects of React is the ability to modularize code into components. This modularization not only helps me with mentally compartmentalizing the code I’m writing into distinct blocks, but it’s also very helpful with writing D.R.Y (Don’t Repeat Yourself) code. One of the ways I’ve recently been working to make my code more dry is with reusable components. Making reusable components that we utilize across our programs can help make our code more succinct, legible, elegant, much easier to debug, and perhaps most importantly — in my opinion — can help keep our UI as consistent as possible.
With reusable components, we write abstracted code with the same skeletal structure, but different functionality depending upon the data passed into it. In the following tutorial for reusable components, I’m going to show some use cases in React that I hope will be helpful!
To provide some context, I’ve been creating a MERN Stack application, and in the following portion, we are looking at a form where users who have been granted access to an admin portal can perform CRUD actions to the database. In the example below we are looking at a portion where users can add chefs to the client-facing portion of the site. Below is a bunch of fields that admins use to do so. Without looking at the code, if you have some experience with HTML and/or JSX you may have deduced that most of the fields are using some combination of the label tag and the input tag. Since I knew that I’d need to make many different form fields for chefs, recipes, and ingredients— the latter two being far, far more complicated than chefs, I decided to abstract the form fields into a reusable component called FormField, which I can use throughout my project.
The FormField component holds a label tag and the input tag as we would’ve expected, and has a series of de-structured props, which allow us to dynamically change the functionality of it depending on data passed in. Everything from the type of input to the value depends on the state / props passed down from other components. Moreover, many input types have unique properties depending on the type of input being utilized. For instance, an input with a type of number may use the step property allowing users to click an up and down arrow to increment or decrement the number in the form. A checkbox can use the checked property to check one option among many by default. It is for this reason that I passed in the …rest operator as a prop into our FormField and then utilize it in the actual input element. …rest allows us to pass other props to FormField without the need for being as explicit.
Now, we can just import FormField into any component, declare it, and pass in props to create almost any type of form. In the ‘Add a New Chef’ Component, I declared FormField three different times. In the code below we have a file upload field, and two text fields. Now, instead of calling label and input repeatedly, we can use our custom component to declare those instead. So much more modular and way cleaner!
