Create an Event Responsive Dropdown List in React
This is the 3rd post in creating the frontend of a clocking in app on React. We continue building the frontend with an interactive event responsive dropdown list in React. We’ll also go over fetch requests using Effect hooks.
This tutorial explains designing a dropdown list that can update content on the page once an item in the dropdown is selected. I found this to be a straightforward way to give impressive results in submitting forms.
We’ll be using a clocking in/out system that will toggle between two buttons depending on the selected person in the dropdown. The end result of this will be:
1. Get your Data into the Component
Firstly, let’s start with an empty component where we can house all our functional parts of the dropdown list.
export const DropdownStaff = () => {
// We'll be adding functionality inside here}
export default DropdownStaff
The first function that needs a home is the one responsible for fetching our data. If you’re hardcoding a finite list, you can skip this step, instead define and populate an array with your own data.
We’ll be fetching our list from the backend using the Effect hook to ensure data is received on mounting. Before this, we’ll need a place to keep the data we get back. So let’s define a state to store it :
var [ allStaff , setStaff ] = useState()We can now do the fetching and the setting within the Effect hook of our component:
You can read more about ‘cleaning up’ the effect hook here.
2. Create the Dropdown
Within our component we can add a simple return with the appropriate elements:
return ( <div> <select> <option disabled defaultValue selected>Select Name</option> <option> Is this working? </option> </select></div>)
If we use this component back in our main App.js:
(If you don’t have the other components, don’t worry. They are additional features but aren’t needed for the dropdown list).
If we check our app out in the browser, we should get the following:
Sweet! Now we can integrate our fetched data into the dropdown.
3. Integrate our Fetched Data
Our list of staff is currently stored in our state, we need it to populate the dropdown to render all the staff. This can also be done with your own data in an array (N.B. the structure will likely be different so you’ll need to keep that in mind).
We do this by mapping every staff member in allStaff to an option tag, with the staffs’ name as the displayed value. Our return statement will look like this:
The conditional at the start checks to see if allStaff is defined, this allows the page to not crash if the fetch request takes its time and allStaff isn’t immediately defined.
If we go back to our browser, we should be able to view the staff list from our backend in the dropdown list:
Even better, we can test out our old component and see if adding new staff will show up in the dropdown list:
4. Monitor Changes in Dropdown List
First Step: we need a way to temporarily store the staff picked from the dropdown list. Whats that? Another state? Yup:
var [ specificStaff , setSpecificStaff ] = useState([])After that, we need to monitor which staff member is picked from the list. We can write a function that will handle any changes in the dropdown list:
const handleChange = (event) => { let ID = event.target.value setSpecificStaff(allStaff.find( staff=>(staff._id==ID) ) )
}
When a different staff member is picked, the function above searches through allStaff until it finds the selected one, and updates the specificStaff state to that staff member.
This function can be called inside the <select> tag, with the event listener onChange. The final product of the last couple of steps:
5. Add a Clock-in & Clock-out Button
So our next task is simple; we want a button that will clock-in/out the staff member picked from the dropdown. This means that when the button is clicked we will be able to update the specific staff’s clockedIn status to the opposite of what it is. For example: if their clockedIn status was false, i.e. not clocked in, then we would set it to true when the button was clicked to clock in).
Now we have a game-plan, we can start implementing it.
Handle Click
The button is easy enough as adding a button element, however the important part is the button’s event listener onClick. For now we can set up the button element with the function call:
<button onClick={handleClick}> Clock In/Out </button>We can now add some functionality to the button by defining handleClick. Some explanation before the function is revealed: we’ll update the specific staff member by first setting their data to a temporary variable, updatedPerson. When we send the update request, we use updatedPerson‘s values in place, which will update the clockedIn status and a new dates array:
If we check our browser we should be able to test the functionality:
When clocking in/out, the person’s clockedIn status updates, whilst also maintaining a record of when they were clocking in/out in the dates array.
The functionality is great, but in terms of UX, the user would find it hard to know if they clocked in/out if they accidentally clicked the button. This mistake only needs to happen once for all the entries to be false, i.e. the opposite of what they are in fact.
To fix this, we can toggle between button designs to make it more apparent what button the user is about to click.
Let’s have a quick minute to meditate. All good? Great, let’s continue.
Button Toggle
Toggling between two buttons is fairly simple in JS:
<> {specificStaff.clockedIn?<button onClick={handleClick} className="clockingButton" id="out">Clock Out</button>:<button onClick={handleClick} className="clockingButton" id="out">Clock In</button>}</>
When the clockedIn status is true the first button will render, and when false, the second one will. With the addition of some fancy CSS to make the buttons more distinguishable, we arrive at this little beauty:
All the functionality is conserved and the buttons will change based on the staff member’s status or prompt the user to select someone if they have not already!
The entire dropdown component in its full glory:
In the next post we’ll focus on making everything look far more clean and user friendly, with quite a bit of CSS.
