Last call to make your voice heard! Our 2022 Developer Survey closes in less than a week. Take survey.
13 votes

Returning the last segment of a split string

I'm not entirely enthusiastic about either. The parts[parts.length - 1] using manual index lookup and subtraction may well take a moment to recognize, "Oh, ...
user avatar
9 votes
Accepted

Generation of a <dl> in React without <div> wrapping elements

as of React 16 version you can use <React.Fragment> <dt>Term</dt> <dd>Definition</dd> </React.Fragment> ...
user avatar
9 votes

Returning the last segment of a split string

tl;dr at the end. In terms of 'performance', js engines are pretty well optimized. For something like this, performance should not be part of your argument against a given piece of code. In terms of ...
user avatar
  • 404
8 votes

Suppress console output from React in Jest testing output but not in browser output

Hope this helps someone else: jest --silent http://facebook.github.io/jest/docs/en/cli.html#silent
user avatar
  • 181
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 ...
user avatar
  • 20.9k
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 ...
user avatar
6 votes
Accepted

To-Do List in React

return { tasks:tasks, numCompleted:null } numCompleted isn't being used anywhere. Remove if from the data. Also, it's ...
user avatar
  • 24.8k
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 ...
user avatar
6 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 ...
user avatar
  • 188
6 votes
Accepted

Is this a good approach for creating pages for multiple content typs with GatsbyJS?

There's definitely a lot of duplicate code in those 2 ifs. I'd extract it into function and pass different things as parameters. Then code would look let's say: <...
user avatar
  • 1,320
6 votes
Accepted

React hooks update array of object

Mutation You are mutating the existing state when you do let newArr = [...rowDataTracker]; // .. newArr[itemIndex]["payload"][columnId] = newValue; ...
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. ...
user avatar
  • 13.2k
5 votes

Suppress console output from React in Jest testing output but not in browser output

You can use the setUpFiles option to configure files to be run before jest run tests. More info here: https://facebook.github.io/jest/docs/configuration.html#setupfiles-array Then in your set up file,...
user avatar
5 votes
Accepted

A simple MP3 player with React.js

First off, well done on getting it to work - that's often the most important and anything beyond that comes with experience and following the docs and guidelines. First question: In my experience your ...
user avatar
  • 76
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 ...
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 <...
user avatar
  • 2,064
5 votes

Colourful block digits

squareStyle variable should be initialized in constructor instead of render. Reason being, render is called on each state update and so, if your render is called ...
user avatar
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 ...
user avatar
5 votes

Is this a good approach for creating pages for multiple content typs with GatsbyJS?

I know this is a couple weeks old, and you already have a good solution. I just wanted to point out a method that is a bit more deterministic/declarative. You are already using multiple instances of ...
user avatar
5 votes

Returning the last segment of a split string

Well, it depends if the performance is an objective or it isn't. Now, I always would prefer good performance; now respect to the person who said "performance does not matter if you use big ...
user avatar
5 votes
Accepted

Code to change the size of the fields based on that 2 fields are optional inside a contact form

I think your current code looks pretty reasonable. All the logic you're typing out is required, and it's quite readable as-is. There are a few tweaks you can consider, but there could well be ...
user avatar
4 votes

React table with column sorting (asc, desc), input filtering, and row ordering

There's a lot of different areas to give feedback on. I'm going to focus on removing state. You want your components to have as little state as possible. See this. I'm going to try rewrite the React ...
user avatar
4 votes
Accepted

Updating state with React

I'll start from what I perceive as "top" and work my way down. ...
user avatar
  • 24.8k
4 votes
Accepted

Simple recipes web app with Redux

I see some Redux conventions misconceptions: The reducer purpose is to change the state, I see that you also copy state to localStorage. You should use ...
user avatar
4 votes
Accepted

Upvote/downvote toggle

One thing I noticed is that you're passing this.handleUpvoteClicked.bind(this) as a prop to your FlatButton components. The ...
user avatar
  • 156
4 votes
Accepted

A box for comments

I see no particularly compelling reason to make CommentBoxContainer a class instead of a Stateless Functional Component, like most of the rest of the items here. <...
user avatar
4 votes
Accepted

Suppress console output from React in Jest testing output but not in browser output

Use a way of checking for the jest global that won't throw an error: ...
user avatar
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: ...
user avatar
  • 1,905
4 votes
Accepted

Refactor multiple condition statements in map function

Use ES2017 object spread: ...
user avatar
  • 1,952
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 ...
user avatar

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