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 ...
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 ...
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 ...
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 ...
6
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
...
5
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 ...
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 <...
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 ...
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 ...
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 ...
4
votes
onChange vs onKeyPress for input in React
Don't complicate your code; the first solution is just fine but needs some tweaking:
...
4
votes
Accepted
Validating Array before rendering
typeof activeEvents === 'object' && activeEvents !== null can be true for both Array ...
4
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 useless ...
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 ...
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 ...
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 ...
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 ...
4
votes
JSX render method in react
You can conditionally select the wrapper instead. Use the ternary to create an internal wrapper component. Not much of a code reduction though, but rather just moving the logic a bit. You can also ...
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&(...
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 ...
4
votes
Accepted
LoginForm submission which sends sign in link to email and then sets value in localStorage
useMutation can used to handle the asynchronous operation. It returns several states such as isLoading, ...
4
votes
LoginForm submission which sends sign in link to email and then sets value in localStorage
There is a slight bit of duplication in the promise callback chain:
...
4
votes
TODO application
A quick review
Functionality, as @Mast stated, this should be at least integrated with localStorage so that the data survives closing the browser
Practices, Avoid ...
3
votes
Memory Game in React
Ok, I had quite a few thoughts on this.
State
Your state seems more complex than it needs to be, and some of it is hiding outside of the state variable.
I think ...
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 <...
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, ...
3
votes
Reactjs Tab Component
Every thing looks good except one performance issue in the code. You have already activeIndex, so no need to traverse the whole map again to render tab content.
...
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 ...
3
votes
Accepted
3
votes
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
jsx × 209react.js × 205
beginner × 37
javascript × 27
css × 16
form × 16
html × 13
typescript × 11
to-do-list × 10
react-native × 9
performance × 8
ecmascript-6 × 8
redux × 8
json × 6
tic-tac-toe × 6
interview-questions × 5
validation × 5
calculator × 5
animation × 5
timer × 5
url-routing × 5
object-oriented × 4
game × 4
unit-testing × 4
authentication × 4