Hey there! 馃憢
I鈥檓 Daman Arora (he/him) and I enjoy building things. Read more.
Journey of a React App From Javscript to Typescript
Handling Props in Child and Parent Component Whenever we define a parent and a child component in React using Typescript, we must always define an Interface in the child component which defines what props child expects to recieve. By adding an interface to the child component, we are adding two big checks: In Parent Component: Are we providing the correct props to Child when we add it ti Parent? In Child Component: Are we using the correctly named + typed props in Child?...
Javascript Array every: Determine if All Array Elements Pass a Test
The Javascript Array.every() method tests whether all the elements of an array satisfy the given condition (a callback passed in by the user). In essence, the every() method executes the callback function for each element of the array and returns true if all elements return true or false if only one element returns false. const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console....
Computed Property Names in Javascript
Computed Property Names is an ES6 feature which allows the names of object properties in JavaScript object literal notation to be determined dynamically, i.e. computed. JavaScript objects are really dictionaries, so it was always possible to dynamically create a string and use it as a key with the syntax object[鈥榩roperty鈥橾 = value. However, ES6 Computed Property Names allow us to use dynamically generated names within object literals. Example: const myPropertyName = 'c' const myObject = { a: 5, b: 10, [myPropertyName]: 15 } console....
Replacing Switch Statements With Object Literals
A typical switch statement in javascript looks like this example below: var type = 'coke'; var drink; switch(type) { case 'coke': drink = 'Coke'; break; case 'pepsi': drink = 'Pepsi'; break; default: drink = 'Unknown drink!'; } console.log(drink); // 'Coke' It鈥檚 similar to if and else statements below: function getDrink (type) { if (type === 'coke') { type = 'Coke'; } else if (type === 'pepsi') { type = 'Pepsi'; } else if (type === 'mountain dew') { type = 'Mountain Dew'; } else if (type === 'lemonade') { type = 'Lemonade'; } else if (type === 'fanta') { type = 'Fanta'; } else { // acts as our "default" type = 'Unknown drink!...
What Are Nested Routes and How to Implement Them Using React Router
Officially, Nested Routing is the general idea of coupling segments of the URL to component hierarchy and data. In my own words, a nested route is a region within a page layout that reacts to route changes. For example, in a single-page application, when navigating from one URL to another, you do not need to render the entire page, but only those regions within the page that are dependent on that URL change....