Category: JavaScript

Categories
React Answers

How to tell the version of React running at runtime in the browser?

Labrador retriever puppy walking on green grass

Sometimes, we want to tell the version of React running at runtime in the browser.

In this article, we’ll look at how to tell the version of React running at runtime in the browser.

How to tell the version of React running at runtime in the browser?

To tell the version of React running at runtime in the browser, we can use the React.version property.

For instance, we write

import React from "react";

console.log(React.version);

to log the React version by calling console.log with React.version.

Conclusion

To tell the version of React running at runtime in the browser, we can use the React.version property.

Categories
JavaScript Answers

How to split a string at the first / and surrounding part of it in a span with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to split a string at the first / and surrounding part of it in a span with JavaScript.

In this article, we’ll look at how to split a string at the first / and surrounding part of it in a span with JavaScript.

How to split a string at the first / and surrounding part of it in a span with JavaScript?

To split a string at the first / and surrounding part of it in a span with JavaScript, we can use the string replace method.

For instance, we write

date.innerHTML = date.innerHTML.replace(/^(..)\//, "<span>$1</span></br>");

to call date.innerHTML.replace with a regex that matches any content before a slash and replace the content with a span element that wraps around the content and add a br element after the span.

Then we assign the returned string back to date.innerHTML to update the content.

Conclusion

To split a string at the first / and surrounding part of it in a span with JavaScript, we can use the string replace method.

Categories
React Answers

How to update React component every second with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to update React component every second with JavaScript.

In this article, we’ll look at how to update React component every second with JavaScript.

How to update React component every second with JavaScript?

To update React component every second with JavaScript, we can use the setInterval function to update a state in the useEffect hook.

For instance, we write

const [time, setTime] = useState(Date.now());

useEffect(() => {
  const interval = setInterval(() => setTime(Date.now()), 1000);
  return () => {
    clearInterval(interval);
  };
}, []);

in a function component.

We get set the initial value of time to the timestamp returned by Date.now.

Then in the useEffect callback, we call setInterval with a callback that calls setTime with Date.now() to update the time to the current timestamp.

And we call it with 1000 to do that every second.

We return a callback that calls clearInterval with interval to clear the timer when we unmount our component.

The useEffect callback runs once when we mount our component since we called it with an empty array.

Conclusion

To update React component every second with JavaScript, we can use the setInterval function to update a state in the useEffect hook.

Categories
JavaScript Answers

How to append HTML string to the DOM with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to append HTML string to the DOM with JavaScript.

In this article, we’ll look at how to append HTML string to the DOM with JavaScript.

How to append HTML string to the DOM with JavaScript?

To append HTML string to the DOM with JavaScript, we can use the insertAdjacentHTML method.

For instance, we write

div.insertAdjacentHTML("beforeend", str);

to call div.insertAdjacentHTML with 'beforeend' and str to append the content of str to the end of the div.

Conclusion

To append HTML string to the DOM with JavaScript, we can use the insertAdjacentHTML method.

Categories
JavaScript Answers

How to convert normal date to Unix timestamp with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert normal date to Unix timestamp with JavaScript.

In this article, we’ll look at how to convert normal date to Unix timestamp with JavaScript.

How to convert normal date to Unix timestamp with JavaScript?

To convert normal date to Unix timestamp with JavaScript, we can use the getTime method.

For instance, we write

const d = "2022-01-01T00:00:00.000Z";
console.log(new Date(d).getTime());

to create the Date object from datetime string d.

And then we call the getTime method to get the Unix timestamp in milliseconds.

Conclusion

To convert normal date to Unix timestamp with JavaScript, we can use the getTime method.