[Error] Cannot stop drag when no active drag Cause: conditionally add a new Droppable Solution: move Droppable to an upper level component Ref https://github.com/atlassian/react-beautiful-dnd/issues/1778#issuecomment-836542941
Categories
Category: Programming
Categories
Number
Handle with Price: 2 decimal places Ref https://stackoverflow.com/questions/3163070/javascript-displaying-a-float-to-2-decimal-places
Categories
[Hook] useState
Overview This is a way to “preserve” some values between the function calls Normally, variables “disappear” when the function exits but state variables are preserved by React The state is only created the first time our component renders. During the next renders, useState gives us the current state. State variables can hold objects and arrays too. Update […]
Categories
[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
[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
[Hook] – useEffect
Pure Function VS Side Effect The same input, it will always return the same output Predictable, reliable, and easy to test Side effects are not predictable because they are actions which are performed with the “outside world.” Making a request to an API for data from a backend server To interact with browser APIs (that is, to use document or window directly) […]
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
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
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
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 […]
