Sorting Date column of a Table

Sorting a Date column can be tricky at times. This is done by calculating the difference between the dates.

NOTE: You will get an error: The left-hand side of an arithmetic operation must be of type ‘any’, ‘number’, ‘bigint’ or an enum type when you do not add valueOf()

When by date is of Date type

new Date(objDate1).valueOf() - new Date(objDate2).valueOf()

When date is in dd/MM/yyyy format

new Date(objDate1.split('/')[2],objDate1.split('/')[1],objDate1.split('/')[0],0,0,0,0).valueOf() 
- 
new Date(objDate2.split('/')[2],objDate2.split('/')[1],objDate2.split('/')[0],0,0,0,0).valueOf()

Sorting statement for a column of a table

sorter: (a, b) => { return new Date(a.objDate1.split('/')[2],a.objDate1.split('/')[1],a.objDate1.split('/')[0],0,0,0,0).valueOf() - new Date(b.objDate1.split('/')[2],b.objDate1.split('/')[1],b.objDate1.split('/')[0],0,0,0,0).valueOf();},
sortDirections: ['ascend', 'descend',]

Error: Property ‘myRef’ does not exist on type ‘MyComponent

We face below error while using ref in our ReactJS application.

Error: Property ‘myRef’ does not exist on type ‘MyComponent

To resolve this error, declare your ref variable inside the class component

export default class MyComponent extends React.Component<IMyComponentProps, any> {
  private myRef;
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
}

Features of JavaScript

Below are some features of JavaScript:

• It is a dynamic, interpreted and weekly typed programming language.
• It is not pre-compiled like C++ (C++ is compiled during or after development). JavaScript is parsed and compiled on the fly, that is, code is evaluated and executed at runtime, in the browser.
• Code can be changed at runtime like type of variable can be changed.
• Data Types are assumed automatically. We don’t necessarily have to define a data type of a variable hence Data Type of variables are not set
• JavaScript is used to create more dynamic websites by executing in the browser.
• JavaScript can manipulate HTML code and CSS.
• JavaScript can be used to send back HTTP requests and fetch data without reloading the page.
• JavaScript cannot access local filesystem, interact with operating system etc.

Remove duplicate values from an Array in JavaScript

Below is a code to remove duplicate values from an array. OriginalArray is an array which contains duplicate values.

function removeDuplicate(OriginalArray){
  let uniqueValues = [];
  for (let i = 0; i < OriginalArray.length; i++) {
    if (uniqueValues.indexOf(OriginalArray[i]) == -1) {
      uniqueValues.push(OriginalArray[i]);
    }
  }
  console.log("Unique Value Array", uniqueValues);
}

Hover text on HTML tag

If you want to display text over HTML tag on mouse over, just add title attribute in tag.
This title property is mostly for all HTML tags.

<img src="#" title="DisplayText"/>
<p title="This is a Paragraph">Hellow World</p>

Empty an array in ReactJS

Below is a piece of code to empty an array state object in ReactJS or Set an array object to blank.

this.setState({ arrayName: [] });

Error TS1110: Type expected

Error:

node_modules/rc-mentions/lib/util.d.ts(4,55): error TS1110: Type expected.

I encountered this error when I was creating a web part in SharePoint Framework using ReactJS.

Solution:

Install the latest version of Typescript or update rush-stack-compiler

npm install typescript@latest
npm install @microsoft/rush-stack-compiler-3.3 --save

or you can use

npm update

Verify that the folder named rush-stack-compiler-3.3 inside node_modules/@microsoft folder.

Now remove dependencies from package.json file for older version and include for the new one.
Change tsconfig.json file in extends field for the new path.

Property ‘entries’ does not exist on type ‘ObjectConstructor’

When we try to read the entries of an object using Object.entries(), it gives the error: Property ‘entries’ does not exist on type ‘ObjectConstructor’.

To resolve this follow below:

• Open config.js file.
• Add following code. There might already be lib section, then add only es2017 under it.

"lib": [
    "es2017"
]

Get Weekday using JavaScript

Below is the method to get Weekday of the week.

function getWeekday(month, day, year){
   var weekdays = new Array(
     "SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"
   );
   var dt = new Date(year, month-1, day, 0,0,0);
   var weekday=dt.getDay();
   console.log(weekdays[weekday]);
}

Error: this.setstate() is not a function in ReactJS

We can get this error inside a function call. Remember to bind that function.

constructor(props){
    super(props);
    this.clear=this.clear.bind(this); // remember to bind your function.
    this.state{
      name=''
    };
  }

  public clear():void{
    this.setState({name:'Akanksha'}); // error here
  }