Rest Countries || React

Community feedback

• 

  Cătălina Hasnaș•300

  @Catalina-HasnasPosted about 1 year ago

  Hello! Nice project :). Clean React components and readable folder structure. I liked that you take the information about preffered theme from the local storage and avoid any flickers. Not a lot to critique, I do have a few suggestions, though:

  • Remove const regions from the component, because it doesn’t need to be re-created every time the component re-renders, like so:

  const regions = ["Africa", "America", "Asia", "Europe", "Oceania"];
  function Filter({ filter, setFilter }) { … regions.map()
  

  If you use it in multiple components, you can export it.

  • You do not need to pass “darkMode” as a prop from App. Look into using a Theme Provider to wrap around the App. You can read about it here. It is the old react documentation, but I find the example in the new documentation to be over-complicated for this purpose. Also, it is mentioned as a use case for theming in the new documentation Theming: If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.

  • A small suggestion: You can add all your color variables at the root level as well and then use a selector such as a class name or an attribute to change them accordingly. You added them in the style attribute in a javascripty way, but you could technically only add an attribute such as: "data-theme = "dark" to the body and let CSS handle the rest :). This article has a good example of this.

  Marked as helpful

  1

  ---

  

  bbeeeeenn•130

  @bbeeeeennPosted about 1 year ago

  Thankyou for your helpful suggestion, this what I wanted on every solutions I submit<3.. I appreciate you for reading the messy codes I made... btw this is my first try on using react after reading the half of the react docs.. I know that I've missed some helpful react features but I'm not sure what it is or how should I do it.. Thankyou for giving me ideas @Catalina-Hasnas

  1