Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to append child after element with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to append child after element with JavaScript.

In this article, we’ll look at how to append child after element with JavaScript.

How to append child after element with JavaScript?

To append child after element with JavaScript, we can use the insertBefore method.

For instance, we write

if (parentGuest.nextSibling) {
  parentGuest.parentNode.insertBefore(childGuest, parentGuest.nextSibling);
} else {
  parentGuest.parentNode.appendChild(childGuest);
}

to call parentGuest.parentNode.insertBefore to insert childGuest before parentGuest element’s next sibling to insert it after parentGuest if nextSibling exists.

Otherwise, we insert it as its last child with appendChild.

Conclusion

To append child after element with JavaScript, we can use the insertBefore method.

Categories
JavaScript Answers

How to get first three characters of a string with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get first three characters of a string with JavaScript.

In this article, we’ll look at how to get first three characters of a string with JavaScript.

How to get first three characters of a string with JavaScript?

To get first three characters of a string with JavaScript, we can use the string substring method.

For instance, we write

const str = "012123";
const strFirstThree = str.substring(0, 3);

console.log(strFirstThree);

to call str.substring with 0 and 3 to return a string with the first 3 characters of str.

Conclusion

To get first three characters of a string with JavaScript, we can use the string substring method.

Categories
TypeScript Answers

How to cast int to enum strings in TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to cast int to enum strings in TypeScript.

In this article, we’ll look at how to cast int to enum strings in TypeScript.

How to cast int to enum strings in TypeScript?

To cast int to enum strings in TypeScript, we can use square brackets.

For instance, we write

export enum Type {
  Info,
  Warning,
  Error,
  Fatal,
}

to define the Type enum.

Then we use Type[Type.Info] to return type 'Info'.

Conclusion

To cast int to enum strings in TypeScript, we can use square brackets.

Categories
JavaScript Answers

How to modify object property in an array of objects with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to modify object property in an array of objects with JavaScript.

In this article, we’ll look at how to modify object property in an array of objects with JavaScript.

How to modify object property in an array of objects with JavaScript?

To modify object property in an array of objects with JavaScript, we can use the array find method.

For instance, we write

const foo = [
  { bar: 1, baz: [1, 2, 3] },
  { bar: 2, baz: [4, 5, 6] },
];

const obj = foo.find((f) => f.bar == 1);
if (obj) {
  obj.baz = [2, 3, 4];
}

console.log(foo);

to define the foo array.

Then we call foo.find with a callback to return the object in foo with bar set to 1.

If obj isn’t undefined, then we set obj.baz to a new value.

Conclusion

To modify object property in an array of objects with JavaScript, we can use the array find method.

Categories
React Answers

How to prevent multiple times button press with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to prevent multiple times button press with React.

In this article, we’ll look at how to prevent multiple times button press with React.

How to prevent multiple times button press with React?

To prevent multiple times button press with React, we can set the disabled prop of the button.

For instance, we write

import React, { useState } from "react";

const Button = () => {
  const [double, setDouble] = useState(false);
  return (
    <button
      disabled={double}
      onClick={() => {
        // ...
        setDouble(true);
      }}
    />
  );
};

export default Button;

to set disabled to the double state.

And we call setDouble with true to set double to true after the first click.

Conclusion

To prevent multiple times button press with React, we can set the disabled prop of the button.