Countries Project Using React

Community feedback

• 

  Maksim Baravy•220

  @maximkatut

  Posted about 3 years ago

  Hi Aaron! This is a very nice solution! Everything looks great!

  There are some issues that I can point out:

  • If you have a list of items - make sure you use list tag and list item tags <ul><li>item1</li><li>item2</li>...</ul> . That is a very good practice.
  • If an item is clickable and it's not an anchor tag or button put cursor: pointer into the styles
  • You can try react-router in your next project, it gives your app a more professional touch
  • Also you can improve your code by doing this:

  if (!renderDetails) {
    <div className='search'>...</div>
    <div className='regionContainer'>...</div>
    <div className='countryGrid'>All tiles</div>
  } else {
    <Details country={details} close={toggleDetails} countryInfo={countryInfo} />
  }
  

  You can improve your accessibility by adding a span tag inside a button and then hiding it like so:

  <button><span className="visually-hidden">Belarus</span></button>
  

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  

  Happy codding!

  10

  Marked as helpful