The other night I found myself in a zoom meeting spectating a mock frontend interview coding challenge done by an engineer with a junior developer. I wasn't the one doing the challenge unfortunately but I got some inspiration to do the challenge myself. I won't say exactly what the challenge was as I don't want to step on any toes but for my solution I wanted to take the main idea of the challenge and add a twist or stretch goal. One feature that you can find on almost every single site or app is some sort of search feature. As popular as they are and for juniors they may kind of feel daunting, they really aren't too bad. Here's how I implemented mine.
As I started out on my own challenge of building this, my first task was to fetch fake user info from an api. The idea for my version (remember I'm twisting someone else's challenge idea) was to use the fake data from the api to render out a twitter feed. You would have just a basic list of boxed tweets that included a users picture, first and last name, their @name, and tweet content like a sentence or two. Using react hooks for the first time I knew I had to store the users in state for sure. In the useEffect hook (which can be kind of compared to componentDidMount() in class components) is where the fetch took place. Using the response I got back from the fetch I set the user state to the response data. Here is a snippet of the fetch:
The response back from the fetch call was an array of user objects. I knew in order to display the data for the tweet feed I had to iterate over the array of objects, and put the users pictures, and their first and last names, as well as their @names in the correct elements. Using .map() I plucked out the information needed and was one step closer to rendering.
After finishing the iteration and rendering the data as well as minimal CSS, here is what the tweet feed looked like.
At this point in time, I was done with my original goal of having the tweet feed, so then I wanted to implement the stretch goal which was to add a search feature to filter the tweets by username. In order to do this part, I knew I need an input box to search in, as well as to make that a controlled input and store the contents in state. Using the useState() hook in React I set the default state of the input to an empty string. Here is how you declare state using the useState hook, as well as creating the input field and making it controlled.
A quick rundown on how this works is you set the value of the input box to be an empty string (const [input, setInput] = useState(""), ) then in the input tags onChange event handler, you update the state with whatever value is being typed into the input box. 
Now in order to make sure whatever is typed filters the tweet feed, we use JavaScripts .filter() method to get the job done. If you are unfamiliar with the .filter() method I'll post a link to it at the end. Since we already have all of our user information stored in our state already, it makes this part a whole lot easer. I used a helper function to filter the all of the users who's username matched with the value in the input field. Here is the helper function:
The last step to ensure our search feature is to call our helper function where we were originally were mapping over our users array. This is the function where it all comes together.
The end result looks like this!
Just like that, you've got yourself a dummy twitter feed and the ability to search and filter the results by username. Some topics I didn't go as deep in detail above were .filter(), and React hooks in general. Below are some resources to help you out on that front. I hope this helps!
Top comments (0)