Tutorials on Functional Components

We've now arrived at Day 5 of our special 6-part YouTube tutorial series on React Hooks . Hooks are so important for all React developers to understand because, conceptually, React components have always been closer to functions and the library supports a functional way of thinking. Hooks add powerful capabilities to functional components. Now in Tutorial 5, Paige covers a powerful Hook - the useContext Hook: The use of component hierarchies solved problems in React around composing UI out of smaller individual parts, but created a range of new problems: More importantly, passing props down became unwieldy in complex component hierarchies where the intermediate components did not need props that were intended for a component further down the hierarchy. These problems are neatly solved for us using the Context API in React, and the useContext Hook lets you share state easily in component hierarchies without passing props down. Learn all about the useContext Hook and how to use it in today's React Hooks tutorial. Keep an eye out for the 6th and final tutorial in our React Hooks series. In it, we'll go in-depth into Custom Hooks and how to write your own. Mastering this skill will turn you into a much more versatile React dev.

In this hands-on tutorial, I’ll show you how to build a React dropdown menu from scratch, without any library. We’ll cover: how to get the selected value from the dropdown, and how to create the dropdown with both functional and class components.React comes with a lot of component libraries for virtually everything you need, from forms and autocomplete search boxes to sliders and navbars. Although these UI libraries can speed up your work and are pretty convenient to use, they can make your project more complex and add to the bundle size. So unless you need to use a library for a specific project, it's preferable to write your own components and keep them as simple as possible. In this article, we'll create a basic React dropdown menu, first as a functional component, then as a class component. We won't use any library; instead, we'll define the elements of the dropdown using styled-components. By the end of this post, you will know how to create a basic React dropdown menu using functional and class components. Although this is a beginner tutorial, I won't cover the basics of React, so in order to get the most out of this article you should know: Before we start, let’s initiate a new code sandbox with React and install styled-components as a dependency. We’ll remove the styles.css file, as we won’t use it, and we’ll create a new styles.js  file instead, in the src folder, where we’ll build our styled-components.  Also, let’s create the Dropdown.js file where we’ll develop the component. Your project structure should look like this:  Before we dive into the actual component, here's what we’ll cover: You can find the final project here: React dropdown - exercise .  To create the dropdown, we’ll use the HTML <select> element. This has the following structure:  So we have the dropdown element itself (the <select> tag), and the dropdown values (the <option> tags). Next to these, we also want to display a heading on top of the dropdown, to tell the users what this list is for. So we’ll need to add a <label> tag.  Finally, if we want to send the selected options to an API endpoint, we need to wrap this entire component in a <form> tag and to add a button, using the <input type=”submit”> element.  So let’s create these components as styled-components first, in the styles.js file. First, we'll create the wrapper, which is an HTML form. Next, we style the <select> tag and its children. Finally, we style the button. Next, let's import the components and create the dropdown component skeleton in the Dropdown.js file. We have our dropdown component, so let's include it in the App.js file: Right now, your app should look like this. If you select one of the options in the dropdown menu, nothing happens yet. To be able to get the value of the selected option and send it to an API endpoint, we need to add a hook. In the App.js file, adjust the code as follows: Here's what we did. First, we declare a new state variable, which is called optionValue . We want this to be equal to the value selected from the list, so we'll add a function called setOptionValue , which will update the state variable to our selected value. To make this work, we need to add an onChange event handler to the Dropdown component, and to define the function that will be called. So now whenever the value of the dropdown changes, the handleSelect function will be called, and the state value will be updated to the one selected from the list. To test if this works correctly, I've added a <p> tag right after the dropdown, where we'll print the state value. All looks good, so now the only thing that we still need to adjust is the endpoint where we send the selected value. I'll add a fake API endpoint, just to test if the form is submitted correctly. In the Dropdown component, add this path to the action : That's all! Now let's create the same dropdown list using a class component. We'll create a separate project for this, to keep things organized. You can find the code for the dropdown class component here . We'll reuse the same styles, so let's first add styled-components as a dependency. Then, let's create a styles.js file, and copy-paste the previous styles. Next, delete the styles.css file, as we won't use it, and add a Dropdown.js file, for our class component. Copy-paste the code from the functional component - we'll start with that and refactor as needed. Here's the starting code: We'll do the same for the App.js file. Here's the starting code: Let's remove the useState hook as we won't use it. Instead, we'll initiate the state in a constructor, as follows: Now we need to add a render() to the component, to output our dropdown menu. The rest of the component is the same as before, but we've added this to the onChange handler as well as to the selected value. Now we need to refactor the handleSelect function as well, and to add it to the constructor. We've also added an export at the end, so now if we reload the app, we should see exactly the same form as before: As you can see, creating your own React dropdown menu, selecting a value from the list, and sending it to a backend API endpoint is pretty straight-forward, regardless of which type of component you choose: functional or class component. If you'd like to learn more, check out these React tutorials: