GitHub user search app

Community feedback

• 

  Matt West•440

  @matt-o-westPosted 10 months ago

  Hello! Thank you for submitting your solution! I have some feedback for you:

  • It looks like you're implementing this with both react and vanilla js patterns. I would recommend sticking with just one or the other, as there are some anti-patterns occurring because of the mix-matching. You shouldn't be accessing dom nodes as you are with query selectors in react, as the reason we use the tool is to create declarative and component-based ui.
  • With state variables, you really want to minimize their use as much as possible - any values you can 'derive' from the data without a state variable, you should do that. If you have a bunch of data that you want to manage in the client, you can set it as an object to a state variable and access it that way. Your code will be much cleaner and synchronous because of this! Believe me, when state variables get out of sync, react can do a lot of funky things that can be hard to track down 😅 below is a quick example I sketched out:

  const [userData, setUserData] = useState({
    url: "https://api.github.com/users/octocat",
    image: "",
    name: "",
    login: "",
    created: "",
    bio: "",
    repos: "",
    followers: "",
    following: "",
    location: "",
    website: "",
    twitter: "",
    company: ""
  });
  

  Setting this state, you can use a function that is as simple as:

    ...prevState,
    name: "New Name"
  }));
  

  • I'm not quite sure where the bug is occurring, but the theme doesn't not toggle on the initial click
  • Styling is responsive, but don't be afraid to add some padding especially on desktop and tablet
  • You can utilize semantic HTML landmarks in your JSX to add accessibility to the page and help users that rely on screenreaders or other features. Check out more information here.

  You're solution above all is great, and I hope you learned a lot! Keep going and happy coding 🎉

  Marked as helpful

  0