Search Results

Separate style out into the CSS if you want - this will de-clutter the JSX code a bit, allowing it to focus primarily on content and logic rather than style and presentation. For example, it'd be nice …

The only thing that changes in the JSX is the download button, so it'd be more appropriate to use conditional rendering when the JSX comes to that line to decide whether you need to render the last bu …

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 differen …

Note that you do the same thing if the array is empty or if the last item's localeDate doesn't match - you can combine those two paths. You only want to update the existing object if the last item ex …

You can take advantage of conditional rendering to concisely render the iconFile if it exists, and use the conditional operator to construct the outer class name. Using two separate classes for nearly …

There are a bunch of small improvements you can make. Since you aren't using name or setName, you can remove them and their useState call (consider a linter to warn on unused variables). You have <f …

There are a few places in the code where you have an array and you want to construct another array from it. Rather than forEach followed by push, it's more appropriate to use Array.prototype.map to tr …

flvPlayerRef? In the constructor, you have this.myRef = React.createRef(); this.flvPlayerRef = element => { this.flvPlayerRef = element; }; This is pretty confusing. The property is either a functi …

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, this is getting the last element of the arra …

Date sorting Your dates are of the format YYYY-MM-DD. You currently sort them with: (a, b) => b.date > a.date ? 1 : b.date === a.date ? 0 : -1 When you want to lexiographically compare strings to det …

Condition bug Your current implementation has a bug. Your lines like these have the problem: (secondaryStatus === 'payment1' || 'payment2' || 'payment3') JavaScript only has unary operators, binary o …

Make the shapes the same In my experience, TypeScript is easiest when similar data has the same shape (type). Rather than conditionally passing a markCompletedTodo, consider passing that prop uncondit …

Typo? I think you meant to set isDragged to false when dragging finishes: onDragEnd={() => { setIsDragged(false); }} Note that you don't need to declare parameter you don't use (and probably should …

React.FunctionComponent probably isn't necessary - it's boilerplate for every single component you have, and arguably makes typings a bit worse, not better. See this article. For example, you could ac …

Your code looks quite reasonable. There are only a few small things I notice: Indent the JSX in App a bit more: ScrollToTop is a child of Router, so it should be indented further, not on the same lev …