Responsive React Hooks API using styled-components

Community feedback

• 

  Mahesh Yadav•1,220

  @Mahesh-yadavPosted over 4 years ago

  Hi

  Overall its great work. I get to know about Array.every() function by looking at your code.

  There is a small bug in your filtering jobs functionality. There are total 10 posts in the data set with job.role values as follows. **6 - Frontend, 2 - Fullstack, 1 - FullStack and 1 - Backend **. Pay attention to letter case - Fullstack vs FullStack. So when I select Fullstack, your app correctly shows 2 jobs and when I select FullStack, it correctly shows 1 job.

  Currently, your search is case sensitive. But, search functionality is generally case-insensitive. In your code, convert filter item and technologies to either lowercase or uppercase before comparing in the following part of your code.

  let technologies = [i.role, i.level, ...i.languages, ...i.tools];
            if (filter.every((item) => technologies.includes(item))) {
              return <JobBox info={i} addTags={addTags} key={i.id} />;
            }
            return null;
  

  2

  ---

  

  Magda Kokot•1,425

  @magdakokPosted over 4 years ago

  Hello! So kind of you to even have a look at the code, thank you! I've just solved the problem :) I like how simple and clean the every() function is :)

  Thank you for the help :)

  0
• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Awesome work on this challenge, Magda. Your solution matches up to the design really well and functions perfectly. How did you like working with Styled Components? Personally, I love them and use them on Frontend Mentor itself!

  Keep up the great work! 👍

  1

  ---

  

  Magda Kokot•1,425

  @magdakokPosted over 4 years ago

  @mattstuddert I literally loved working with Styled Components. They are so easy to manipulate with props and you can still nest classes as you do with Sass. I just have to give a thought of whether should I keep them in a separate file or just try to break components themselves into smaller ones.

  Thank you a lot for the feedback! :)

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @magdakok no problem! I tend to break them out into small components so that you can easily import them for repeatable styles. I also typically have the styled component code and the JSX component in separate files too. It's a fine balance between separating out the code nicely and creating an architectural mess with files everywhere in larger projects though! 😅

  1

  

  Magda Kokot•1,425

  @magdakokPosted over 4 years ago

  @mattstuddert this sounds reasonable :) I'm looking forward to my first big project's headache. By the way, thank you a lot for featuring my solution in the newsletter! If I knew before I'd have added some nice transitions and cool stuff. It really cheered me up during the real struggle with paper, scissors, rock challenge. You DID know what you were doing while designing the annoying gradient behind the winning symbol, didn't you? ;)

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @magdakok haha, yep I thought it would be an "interesting" addition to the challenge. Designers will often throw these little curveballs in the real world, so it's good practice 😅

  You're welcome re: having your solution featured in the newsletter. You did an awesome job and it deserved to be featured! It will help a lot of people to be able to see your solution and learn from it.

  0