Categories
JavaScript Answers

How to style active Link in react-router v4 and JavaScript?

Sometimes, we want to style active Link in react-router v4 and JavaScript.

In this article, we’ll look at how to style active Link in react-router v4 and JavaScript.

How to style active Link in react-router v4 and JavaScript?

To style active Link in react-router v4 and JavaScript, we use the NavLink component.

For instance, we write

<div id="tags-container">
  {tags.map((t) => (
    <NavLink className="tags" activeStyle={{ color: "red" }} to={t.path}>
      {t.title}
    </NavLink>
  ))}
</div>

to render NavLinks.

We set its activeStyle to the style that’s rendered when the current link is active.

Categories
JavaScript Answers

How to create line breaks in console.log() in Node.js and JavaScript?

Sometimes, we want to create line breaks in console.log() in Node.js and JavaScript.

In this article, we’ll look at how to create line breaks in console.log() in Node.js and JavaScript.

How to create line breaks in console.log() in Node.js and JavaScript?

To create line breaks in console.log() in Node.js and JavaScript, we log the '\n' character.

For instance, we write

console.log({ a: 1 }, "\n", { b: 3 }, "\n", { c: 3 });

to call console.log with '\n' separating each object to log each object in their own line.

Conclusion

To create line breaks in console.log() in Node.js and JavaScript, we log the '\n' character.

Categories
JavaScript Answers

How to show a spinner while loading an image via JavaScript?

Sometimes, we want to show a spinner while loading an image via JavaScript.

In this article, we’ll look at how to show a spinner while loading an image via JavaScript.

How to show a spinner while loading an image via JavaScript?

To show a spinner while loading an image via JavaScript, we add the spinner image and show it.

For instance, we write

<div><img src="spinner.gif" id="spinnerImg" style="display: none" /></div>

to add the spinner image and hide it by default.

Then we write

const hideSpinner = () => {
  document.getElementById("spinnerImg").style.display = "none";
};

const chartOnClick = () => {
  const spinnerShowTime = 3000;
  document.getElementById("spinnerImg").style.display = "";
  document.getElementById("chart").src = "/charts/10.png";
  setTimeout(hideSpinner, spinnerShowTime);
};

to load the image we want to show in the chartOnClick function.

We show the spinner with

document.getElementById("spinnerImg").style.display = "";

Then we load the image with

document.getElementById("chart").src = "/charts/10.png";

Then we the spinner in the hideSpinner function with

document.getElementById("spinnerImg").style.display = "none";

Conclusion

To show a spinner while loading an image via JavaScript, we add the spinner image and show it.

Categories
JavaScript Answers

How to get the size of JSON object with JavaScript?

Sometimes, we want to get the size of JSON object with JavaScript.

In this article, we’ll look at how to get the size of JSON object with JavaScript.

How to get the size of JSON object with JavaScript?

To get the size of JSON object with JavaScript, we use the TextEncode constructor.

For instance, we write

const size = new TextEncoder().encode(JSON.stringify(obj)).length;
const kiloBytes = size / 1024;
const megaBytes = kiloBytes / 1024;

to create a TextEncoder object and call its encode method with the JSON string we want to get the size of.

Then we get the size of that with length in bytes.

Next, we get the size in KB and MB by dividing each by 1024.

Conclusion

To get the size of JSON object with JavaScript, we use the TextEncode constructor.

Categories
JavaScript Answers

How to fix “forEach not a function” error for JavaScript objects?

Sometimes, we want to fix "forEach not a function" error for JavaScript objects.

In this article, we’ll look at how to fix "forEach not a function" error for JavaScript objects.

How to fix "forEach not a function" error for JavaScript objects?

To fix "forEach not a function" error for JavaScript objects, we can use some object methods.

For instance, we write

Object.values(a).forEach((value) => {
  console.log(value);
});

to call Object.values with a to return all the property value of object a in an array.

Then we call forEach with a callback to log each value.

Conclusion

To fix "forEach not a function" error for JavaScript objects, we can use some object methods.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.