Categories
JavaScript

[Package] react-beautiful-dnd

[Error] Cannot stop drag when no active drag Ref https://github.com/atlassian/react-beautiful-dnd/issues/1778#issuecomment-836542941

Categories
JavaScript

Number

Handle with Price: 2 decimal places Ref https://stackoverflow.com/questions/3163070/javascript-displaying-a-float-to-2-decimal-places

Categories
React

[Hook] useState

Overview Update Array State Update Object State Callback for useState Refs https://reactjs.org/docs/hooks-state.html https://stackoverflow.com/questions/54676966/push-method-in-react-hooks-usestate https://stackoverflow.com/a/56394177

Categories
css JavaScript

[Package] styled-components

Motivation Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary. No class name bugs: styled-components generates unique class names for your styles. Simple dynamic styling: adapting […]

Categories
JavaScript

[Package] date-fns

Comparison with MomentJs date-fns vs moment Problems with Moment.js: It is highly based on OOP APIs, which makes it fail to work with tree-shaking, thus leading to a huge bundle size and performance issues. It is mutable and it causes bugs Complex OOP API (which doubles mutability problem) Advantages of date-fns Function per file Date-fns library consists […]

Categories
React

[Hook] – useEffect

Pure Function VS Side Effect useEffect How do I use useEffect? The function passed to useEffect is a callback function. This will be called after the component renders. The second argument is an array, called the dependencies array. This array should include all of the values that our side effect relies upon. Common mistakes Cleanup […]

Categories
JavaScript React

[Warning] A component is changing an uncontrolled input of type text to be controlled.

https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro Cause: An input field will become uncontrolled when the initial value is undefined Solution:

Categories
JavaScript Programming

Object

Use variable for key in Object https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable Comparison https://stackoverflow.com/questions/1068834/object-comparison-in-javascript

Categories
JavaScript

Date

Copy / clone a Date object getTime() method, which returns the number of milliseconds since 1 January 1970 00:00:00 UTC + sign is unaray operator here. It means new Date(Number(orig)) https://stackoverflow.com/questions/1090815/how-to-clone-a-date-object Update a state object with Date type in React Return a different object in setMyDate so that React can tell it has been modified https://stackoverflow.com/questions/72388233/adding-a-day-to-react-state-date-object-created-using-usestate

Categories
css HTML

Table

Table overflows div container Fixed (source)With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table’s width, the width of the columns, and borders or cell spacing. Automatic (source)In this algorithm (which generally requires no more than two passes), the table’s width is […]