React project (2) review

Learning React, worked on second test project.

Please provide your feedback and code review where pattern can be improved or if there are mistakes in code.

Live: https://surnames.netlify.app

Source: https://github.com/tpkahlon/javascript/tree/master/surnames

The UX for the two drop-down menus is, honestly, not the greatest. How about an interface with one drop-down menu for the countries, and then a couple of radio buttons for male and female? That way you wouldn’t need the “reset” button.

First, great job diving in to React and making these test projects. As well, you’re definitely showing a degree of comfort and aptitude using JavaScript.

Here are a couple things I noticed:

  • If I choose a country from the female drop-down, I get redirected to a page which says the country does not exist, and the back button in the menu bar is disabled.

  • Functionally, and I understand this is a test project, but I don’t think I should need to click the Reset button. I feel like the drop-down menus should always be available.

  • This project isn’t that big, but it is already large enough that I have to spend some time interpreting your code. You should get in the habit of commenting even code which is just for yourself. If it goes on Github, it’s available for other developers or potential employers to look at.

Again, great job with React. I think you should try something a little more involved now. After a couple projects, you should know your way around React, it isn’t beyond your ability. Once you get an idea, maybe try recreating a nice design from a professional website that you like the look of. It will take a lot more time to style HTML/CSS-wise, but, once finished, it will make a good addition to your portfolio.