Responsive Countries API with react.js and tailwind css with dark mode

Community feedback

• 

  Michael Godfrey•340

  @michagodfreyPosted over 1 year ago

  Hi Asfer,

  Great work on the challenge! It looks good and works well despite the difficulties you mentioned.

  It sounds like you were having problems with rendering the data, I had a look at your code and I think you could try ternary operators to render the data. For example.

  <p> <b>Capital: </b> {capital ? capital : null} </p>

  Without that condition, my React app would crash whenever the component was fed an object without a capital field.

  Hope that helps :)

  Marked as helpful

  0

  ---

  

  Asfer Ali•260

  @Asfer-devPosted over 1 year ago

  @michagodfrey thanks! I'll try that next time.

  I just checked your solution and awesome work on that!

  Btw I would like to know how you implemented the different icons for light and dark mode? I tried the ternary operator for rendering two different icons based on the active theme but it doesn't render after the first time.

  0

  

  Michael Godfrey•340

  @michagodfreyPosted over 1 year ago

  @Asfer-dev That's strange it doesn't switch the icon, I had a look at your header component and I used the same method you did - with a ternary operator. One thing you could try is to instead of setting the state directly in the JSX, is to use a function instead. For example:

  change: onClick={() => setDarkMode(!darkMode)}

  to: onClick={toggleDarkMode}

  and have the function somewhere to handle the toggle function toggleDarkMode() { setDarkMode(!darkMode) }

  Sometimes setting state directly in the JSX leads to strange behaviour.

  That's my best guess, if this solves it please let me know because I'd be interested to find out if that worked.

  Marked as helpful

  0