Author: John Au-Yeung

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

Categories
JavaScript Answers

How to add anything in the head element with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add anything in the head element with JavaScript.

In this article, we’ll look at how to add anything in the head element with JavaScript.

How to add anything in the head element with JavaScript?

To add anything in the head element with JavaScript, we can use the document.head.appendChild method.

For instance, we write

const favicon = document.createElement("link");
favicon.id = "myFavicon";
favicon.rel = "shortcut icon";
favicon.href = "http://www.example.com/my-favicon.ico";

document.head.appendChild(favicon);

to create the link element with createElement.

Then we set the attributes of the link element with

favicon.id = "myFavicon";
favicon.rel = "shortcut icon";
favicon.href = "http://www.example.com/my-favicon.ico";

id, rel, and href set the attribute with the same name.

And then we call document.head.appendChild with favicon to insert it into the head element as its last child.

Conclusion

To add anything in the head element with JavaScript, we can use the document.head.appendChild method.

Categories
JavaScript Answers

How to insert space before capital letters with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to insert space before capital letters with JavaScript.

In this article, we’ll look at how to insert space before capital letters with JavaScript.

How to insert space before capital letters with JavaScript?

To insert space before capital letters with JavaScript, we can use the string replace method.

For instance, we write

const newS = s.replace(/([A-Z])/g, " $1").trim();

to call s.replace with the /([A-Z])/g to match all capital letters in string s.

The 2nd argument is ' $1' which means we add a space before the matched substring.

Finally, we call trim to trim the starting and ending whitespaces from the returned string.

Conclusion

To insert space before capital letters with JavaScript, we can use the string replace method.

Categories
JavaScript Answers

How to fix JSON.stringify changes time of date because of UTC with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix JSON.stringify changes time of date because of UTC with JavaScript.

In this article, we’ll look at how to fix JSON.stringify changes time of date because of UTC with JavaScript.

How to fix JSON.stringify changes time of date because of UTC with JavaScript?

To fix JSON.stringify changes time of date because of UTC with JavaScript, we can use JSON.parse to convert the date back to its original format.

For instance, we write

let currentDate = new Date();
currentDate = JSON.stringify(currentDate);
currentDate = new Date(JSON.parse(currentDate));

to call create the currentDate date object.

Then we call JSON.stringify to convert the currentDate object into a JSON string.

Then we call JSON.parse to parse the date string back to its original format.

And then we use the Date constructor to convert it back to a date object.

Conclusion

To fix JSON.stringify changes time of date because of UTC with JavaScript, we can use JSON.parse to convert the date back to its original format.

Categories
React Answers

How to correctly catch change or focusOut event on text input in React?

Labrador retriever puppy walking on green grass

Sometimes, we want to correctly catch change or focusOut event on text input in React.

In this article, we’ll look at how to correctly catch change or focusOut event on text input in React.

How to correctly catch change or focusOut event on text input in React?

To correctly catch change or focusOut event on text input in React, we can watch the blur event.

For instance, we write

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log("Triggered because this input lost focus");
      }}
      placeholder="onBlur"
    />
  );
}

to add an input into the Example component.

We set its onBlur prop to a function that’s called when we move our focus away from the input.

Conclusion

To correctly catch change or focusOut event on text input in React, we can watch the blur event.

Categories
React Answers

How to go back to the previous route with React Route v4?

Labrador retriever puppy walking on green grass

To go back to the previous route with React Route v4, we can use the history.goBack method.

For instance, we write

//...
import { withRouter } from "react-router-dom";

class Demo extends Component {
  //...
  constructor(props) {
    super(props);
    this.goBack = this.goBack.bind(this);
  }

  goBack() {
    this.props.history.goBack();
  }
  //...
}

export default withRouter(Demo);

to call the this.props.history.goBack method in goBack.

We get the method because we call withRouter with Demo to inject the history prop into the Demo component.

We call this.props.history.goBack method to go back to the previous route.