Skip to main content
Share Your Experience: Take the 2024 Developer Survey
7 votes
Accepted

Country Guessing Game

The screen design looks very nice. It is minimalistic, yet pleasing. It almost perfectly fits on the small screen of my phone (only sometimes, I have to scroll down to see all the answer buttons). The ...
Roland Illig's user avatar
  • 21.3k
7 votes

Simple checkboxes with React

I think everything Sam Onela said is great. I'm gonna add a few more things. Don't modify your state directly In general, it's considered bad practice to directly modify your state object. According ...
Simon Baumgardt-Wellander's user avatar
7 votes
Accepted

Create an address self-complete bar

A few things you can improve: Use const instead var Don't use any as type Move ...
m.rufca's user avatar
  • 208
6 votes

Country Guessing Game

Feedback Nice use of arrow functions, the fetch API (and associated promises), etc. The layout looks nice as well. Suggestions/Review Points Options could appear multiple times The code in ...
Sᴀᴍ Onᴇᴌᴀ's user avatar
5 votes
Accepted

Building a multi-panel display with React and Bootstrap

Move variables out of render All the variables you are storing are sitting in the render method of the respective component. ...
SirPython's user avatar
  • 13.3k
5 votes
Accepted

TODO in React w/ Redux

I'm not exactly sure of your environment (I'm going to assume you're using Node), and with this assumption, I want to address a few things starting with specific things, then more general: Specific ...
Andrew Li's user avatar
  • 261
5 votes
Accepted

Jest / Enzyme test for a React component to calculate average data speed

There are two distinct parts in your test: Testing the rendering of AvgSpeed component. Testing the logic of getAverage() and <...
Rene Saarsoo's user avatar
  • 2,062
5 votes
Accepted

batch progress visualization In React.js

The function render() in only supposed to render. It is not supposed to compute some style, set variables, have any logic other than render: (Functions Names Should ...
Orlyyn's user avatar
  • 178
5 votes

batch progress visualization In React.js

The answer by Orlyyn explains it well. Just adding to it: You can probably destructure your variables, this helps with readability and reuse. Since you are not using the state of the class you can ...
m.sohail's user avatar
5 votes
Accepted

Tic Tac Toe in React (official tutorial)

First, congratulations on working code. Recommendations: Simplify your state Simplify your controls Simplify your functions Your state is overly complex, even with no user interaction it is very ...
Mke Spa Guy's user avatar
4 votes
Accepted

React typeahead component

I think there are many things you could improve, I will try to review your code and give some pointers. Instead of using React.Component, you should directly ...
Mario Santini's user avatar
4 votes
Accepted

Refactor multiple condition statements in map function

Use ES2017 object spread: ...
woxxom's user avatar
  • 1,952
4 votes
Accepted

Class to create HTML heading tags in React

Choosing the heading level at runtime: According to the official docs, you cannot use expressions within JSX types. However, you can use capitalized variables: ...
le_m's user avatar
  • 1,925
4 votes

onChange vs onKeyPress for input in React

Don't complicate your code; the first solution is just fine but needs some tweaking: ...
Devdahcoder's user avatar
4 votes
Accepted

Validating Array before rendering

typeof activeEvents === 'object' && activeEvents !== null can be true for both Array ...
Taki's user avatar
  • 608
4 votes
Accepted

Different class name based on condition in React

if you're just trying to decide between number--high number--medium or '' based on the ...
Ryan Baker's user avatar
4 votes
Accepted

Calculator app in React

As a preface: Your code works good, is readable and does its job efficiently. The following review, though long, doesn't mean there is anything substantially wrong with it :-) General comments In the ...
gitcdn's user avatar
  • 431
4 votes
Accepted

React setState function in useEffect

Short answer: You can include setExpanded in the dependency array. Long answer: The function passed to useEffect will fire ...
P..'s user avatar
  • 56
4 votes

How many `useState` and `useEffect` instances is conventional: one per page or one per app?

I don't normally code in JavaScript but here's some problems I see with the code. When skimming your code it's hard to tell where a lot of function's argument and body, end and begin. this is because ...
Peilonrayz's user avatar
  • 43.4k
4 votes

React Native screen to add a city to a weather app using a REST API

The first mistake: API key is public maybe you could store it in react-native-keychain. Secondly, you should create three files for style(component), for view(component), for function(API&(...
Joshua mbavazi's user avatar
4 votes

Trivia game in react

With React, it's important to identify and separate what requires and what doesn't require state. In this scenario, the presentation of the questions and answers is ...
Kaushik Shankar's user avatar
3 votes
Accepted

React calculator

Fully functional example : ...
Treycos's user avatar
  • 340
3 votes
Accepted

Mapping JSON object to HTML

A few things: I'm not sure why you need to map over the top level object? Are there top-level keys other than dataset that you're interested in? From your example,...
Cam Jackson's user avatar
3 votes

Unit tests for React component to submit an input form with validation

One thing that could help a lot is to realize that tests verify behavior, not implementation. This means you shouldn't be validating these things: should have a ...
Johntron's user avatar
  • 1,100
3 votes

React Native - Combining login and signup pages into one component

React is component based, so i think you should not combine it, you should split component for the footer, component for the header, component for the container and if you want to render inside the ...
Ihsan's user avatar
  • 137
3 votes
Accepted

Simple checkboxes with React

Main Question Can somebody please tell me what would have made my code more "correct"? It is difficult to know exactly what would have made my code more "correct" but it does look like the method ...
Sᴀᴍ Onᴇᴌᴀ's user avatar
3 votes

React container component

You don't have to put content as a prop, you can do this: ...
Arber Sylejmani's user avatar
3 votes
Accepted

How to set state of multiple properties in one event handler (React)

I find it fine as it is, but if you really want to keep a single method, you can parametrize it by the name of the key to set: ...
301_Moved_Permanently's user avatar
3 votes

React For loop component

This approach is not bad but I'd highlight a few issues: You wrap each element with a <div>, it's unnecessary and for a very long list you create many ...
Adriano Repetti's user avatar
3 votes
Accepted

TypeScript implicit 'any' type with computed property key

You very rarely need to use any in TypeScript because its type-system is so expressive. The problem is that copyFormat is ...
Curtis F's user avatar
  • 334

Only top scored, non community-wiki answers of a minimum length are eligible