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, ...
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> ...
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 ...
  • 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
  • 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 ...
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 ...
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 ...
  • 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 ...
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 ...
  • 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: <...
  • 1,430
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; ...
5 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 ...
  • 166
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. ...
  • 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,...
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 ...
  • 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 ...
  • 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 <...
  • 2,064
5 votes
Accepted

React - am i overusing props or is it exactly how they are suppoused to be used?

Use Props ! Using props to highly customize your component is good practice, but too many props isn't always good ! You need to ask yourself: Am I trying to overly handle every situation possible ? ...
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 ...
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

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 ...
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 ...
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 ...
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

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 ...
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 ...
4 votes
Accepted

Updating state with React

I'll start from what I perceive as "top" and work my way down. ...
  • 24.8k
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. <...
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: ...
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: ...
  • 1,915

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