Author: John Au-Yeung

Sometimes, we want to set inline styles with React.

In this article, we’ll look at how to set inline styles with React.

How to set inline styles with React?

To set inline styles with React, we set the style prop of an element.

For instance, we write

<span
  style={{ fontSize: 1.7 + "em" }}
  className="glyphicon glyphicon-remove-sign"
></span>

to set the fontSize property to set the font-size CSS property inline.

Conclusion

To set inline styles with React, we set the style prop of an element.

Sometimes, we want to go full screen on click with JavaScript.

In this article, we’ll look at how to go full screen on click with JavaScript.

How to go full screen on click with JavaScript?

To go full screen on click with JavaScript, we use the requestFullscreen method.

For instance, we write

const elem = document.getElementById("myvideo");
elem.requestFullscreen();

to select the element with getElementById.

Then we request the element to go full screen with elem.requestFullscreen.

Conclusion

To go full screen on click with JavaScript, we use the requestFullscreen method.

Sometimes, we want to check whether multiple values exist within an JavaScript array.

In this article, we’ll look at how to check whether multiple values exist within an JavaScript array.

How to check whether multiple values exist within an JavaScript array?

To check whether multiple values exist within an JavaScript array, we use the array every and includes methods.

For instance, we write

const containsAll = arr1.every((i) => arr2.includes(i));

to call every with a function that returns whether item i in arr is in the array arr2 with includes.

If every element of arr1 is in arr2, then true is returned.

Conclusion

To check whether multiple values exist within an JavaScript array, we use the array every and includes methods.

Sometimes, we want to calculate string value in JavaScript without using eval.

In this article, we’ll look at how to calculate string value in JavaScript without using eval.

How to calculate string value in JavaScript without using eval?

To calculate string value in JavaScript without using eval, we can use the Function constructor.

For instance, we write

const evil = (fn) => {
  return new Function("return " + fn)();
};

console.log(evil("(12 / 5) * 9 + 9.4 * 2;"));

to define the evil function.

In it, we create a function from the fn string with the Function constructor.

fn has the function’s code in a string.

Then we call the function and return its return value.

Next, we call evil with the expression we want to evaluate in a string to get the result of the expression.

Conclusion

To calculate string value in JavaScript without using eval, we can use the Function constructor.

Sometimes, we want to access static methods within classes with TypeScript.

In this article, we’ll look at how to access static methods within classes with TypeScript.

How to access static methods within classes with TypeScript?

To access static methods within classes with TypeScript, we access it as a property of the class.

For instance, we write

interface IHasMemberFunction {
  aMemberFunction(): void;
}

class Test {
  public static aStaticFunction(aClass: IHasMemberFunction): void {
    aClass.aMemberFunction();
  }

  private aMemberFunction(): void {
    Test.aStaticFunction(this);
  }
}

class Another {
  private anotherMemberFunction(): void {
    Test.aStaticFunction(new Test());
  }
}

to call the Test.aStaticFunction static method in the Another class’ anotherMemberFunction method and in the Test class’ aMemberFunction method.

We define the static method with the static keyword.

Conclusion

To access static methods within classes with TypeScript, we access it as a property of the class.