They are roughly equivalent. The significant difference is that the initializer in the second example is executed before constructor. The second approach uses class fields proposal. It is not a part of ECMAScript standard yet so you need to set up transpiler properly to use the second approach. UPD Take a look at Babel output … Read more
First: A simple solution will be to create a component for the content inside a map function and pass the values as props and when you call the function from the child component you can pass the value to the function passed down as props. Parent deleteTodo = (val) => { console.log(val) } todos.map(el => … Read more
Private keyword The private keyword in TypeScript is a compile time annotation. It tells the compiler that a property should only be accessible inside that class: class PrivateKeywordClass { private value = 1; } const obj = new PrivateKeywordClass(); obj.value // compiler error: Property ‘value’ is private and only accessible within class ‘PrivateKeywordClass’. However compile … Read more
ESLint v8 now supports static class properties natively: https://eslint.org/blog/2021/10/eslint-v8.0.0-released parserOptions ecmaVersion should be set to 13, 2022, or “latest” to enable the support. Add this to your .eslint.(cjs | json | js) { parserOptions: { ecmaVersion: 2022, } }
I understand that arrow functions make things more efficient by not recreating the functions each time they are referred to This is not true. Arrow functions handles the this context in a lexical way, where “normal” function do it dynamically. I wrote about the this key word in depth if you need more info about … Read more
If you want to use experimental features (such as arrows as class methods) you need to use babel-eslint as a parser. Default parser (Espree) doesn’t support experimental features.
You make “public static field” using accessor and a “static” keyword: class Agent { static get CIRCLE() { return 1; } static get SQUARE() { return 2; } } Agent.CIRCLE; // 1 Looking at a spec, 14.5 — Class Definitions — you’d see something suspiciously relevant 🙂 ClassElement[Yield] : MethodDefinition[?Yield] static MethodDefinition[?Yield] ; So from … Read more
Your syntax is slightly off, just missing an equals sign after the property name. class SomeClass extends React.Component { handleInputChange = (val) => { console.log(‘selectionMade: ‘, val); } } This is an experimental feature. You will need to enable experimental features in Babel to get this to compile. Here is a demo with experimental enabled. … Read more