I’m new to writing blog posts. So I’m trying something out. I’m splitting the more technically detailed portion from the less technically. Feel free to let me know if it feels silly to be separated or keeps it more coherent. Part 2 - Deep Dive coming soon.
While a simple Google search reveals many ways to create a Search Bar with React & Javascript, I wanted to create my own to understand how it works. If you’d like to skip the extended version, head to 'The Implementation’ section or check out the technically detailed post coming on Tuesday.
The Project
My most recent project was creating a React client for a Rails API. I created an uncomplicated martial arts studio management system. The administrator can create users/students, lessons/classes, and student challenges. While the student side would be able to sign in when they attend class.
For the student sign-in, I planned to implement a clean and intuitive search bar. The student would type their last name, and their information would populate with the option to check-in. Keeping it simple, easy, and to the point was my main focus. Unfortunately, I had no idea where to start. Like my time with The Flatiron School had taught me, I started with what I knew:
- The search bar had to be able to fetch all the users
- After retrieving the users, it would have to filter the users
- It would then need to display the user’s information clearly for the user to read.
- It would also need to display a functional button to check the user in
- The current lesson would need to be retrieved to be attached to the selected user.
- Ideally: It would be able to do this all while the user was still typing
The Knowledge
All of this felt reasonable to achieve, and while I wrote the pseudo-code, it started to come together. I knew how it should function, but I was hazy on how the implementation. So as any developer does when confronted with a lack of knowledge, I went to Google. Unsurprisingly, there are many methods people use to implement a search bar.
While I read through the various techniques, I could understand the processes, but I couldn’t understand the reasons for their designs or why I would prefer one over the other. I didn’t feel comfortable using code I couldn’t fully explain the reason behind using. So I decided to create my own.
The Implementation
First Step - Search Bar
The search bar renders a form for user input assigned to the searchTerm state.
Second Step - Current Lesson
On the initial render of the home page component,<RetrieveCurrentLesson />
retrieves the current lesson. Once mounted, the component fetches all lessons. It then filters the lessons by date & time to find the nearest lesson to the current date & time. Afterwards,
<DisplayCurrentLesson lesson={nextLesson} />
is called to handle displaying the contents.
Third Step - State
As the user input changes (the user enters or removes a character), the searchTerm state is updated:
handleChange = (e) => { this.setState({ [e.target.name]: e.target.value })}
This state is then passed to another component:
<SearchResults searchTerm={this.state.searchTerm} />
Fourth Step - Search
The users list passes to the SearchResults component after being fetched from the home page component. Much like the current lesson, the user is then filtered based on the searchTerm state from User input.
As a user’s last name matches a user in the users list, it is displayed along with a button to ‘Check-in’.
Fifth Step - Association
The button rendered with the searched user associates the user with the current lesson. The home page then renders a cleared form, ready for the next user to ‘Check-In’.
Conclusion
As they say, “There’s more than one way to skin a cat.” Ultimately, I’m glad I went through the trouble of creating my method. It forced me to understand the workflow and design. Even if it’s not the most efficient method, I’m proud of it and can always improve.
Attribution
Cover Photo by Andrew Neel on Unsplash
Second Photo by Evgeni Tcherkasski on Unsplash