Category: JavaScript

Categories
React Answers

How to fix window is not defined in Next.js React app?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix window is not defined in Next.js React app.

In this article, we’ll look at how to fix window is not defined in Next.js React app.

How to fix window is not defined in Next.js React app?

To fix window is not defined in Next.js React app, we check if window is undefined.

For instance, we write

if (typeof window !== "undefined") {
  // ...
}

to check if window isn’t undefined.

If it’s not, then we can run client side code safely by putting the code in the if block.

Conclusion

To fix window is not defined in Next.js React app, we check if window is undefined.

Categories
JavaScript Answers

How to convert special characters to HTML in JavaScript

Labrador retriever puppy walking on green grass

Sometimes, we want to convert special characters to HTML in JavaScript.

In this article, we’ll look at how to convert special characters to HTML in JavaScript.

How to convert special characters to HTML in JavaScript

To convert special characters to HTML in JavaScript, we use the String.fromCharCode method.

For instance, we write

const decodeHtmlCharCodes = (str) =>
  str.replace(/(&#(\d+);)/g, (match, capture, charCode) =>
    String.fromCharCode(charCode)
  );

to define the decodeHtmlCharCodes function.

In it, we call str.replace with a regex to match all special characters with the regex.

The callback return the character given the charCode, which we get from the regex matches.

Conclusion

To convert special characters to HTML in JavaScript, we use the String.fromCharCode method.

Categories
React Answers

How to use React.forwardRef in a class based component?

Labrador retriever puppy walking on green grass

Sometimes, we want to use React.forwardRef in a class based component.

In this article, we’ll look at how to use React.forwardRef in a class based component.

How to use React.forwardRef in a class based component?

To use React.forwardRef in a class based component, we render the class component in the forwardRef callback.

For instance, we write

class ElemComponent extends Component {
  render() {
    return <div ref={this.props.innerRef}>Div has a ref</div>;
  }
}

export default React.forwardRef((props, ref) => (
  <ElemComponent innerRef={ref} {...props} />
));

to call forwardRef with a callback that renders the ElemComponent class component.

We set the innerRef prop to ref.

And then we access the ref with this.props.innerRef.

Conclusion

To use React.forwardRef in a class based component, we render the class component in the forwardRef callback.

Categories
JavaScript Answers

How to run script elements inserted with innerHTML with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to run script elements inserted with innerHTML with JavaScript

In this article, we’ll look at how to run script elements inserted with innerHTML with JavaScript.

How to run script elements inserted with innerHTML with JavaScript?

To run script elements inserted with innerHTML with JavaScript, we append the script element to the body element.

For instance, we write

const script = document.createElement("script");
script.innerHTML = 'console.log("hi")';
document.body.appendChild(script);

to create a script element with createElement.

Then we call document.body.appendChild to append the script element as the last child of the body element and run it.

Conclusion

To run script elements inserted with innerHTML with JavaScript, we append the script element to the body element.

Categories
JavaScript Answers

How to check if the response of a fetch is a JSON object in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to check if the response of a fetch is a JSON object in JavaScript.

In this article, we’ll look at how to check if the response of a fetch is a JSON object in JavaScript.

How to check if the response of a fetch is a JSON object in JavaScript?

To check if the response of a fetch is a JSON object in JavaScript, we can check the content-type response header.

For instance, we write

const response = await fetch(myRequest);
const contentType = response.headers.get("content-type");
if (contentType?.indexOf("application/json") !== -1) {
  //...
} else {
  //...
}

in an async function to call fetch to make a request.

Then we get the content-type header with response.headers.get("content-type").

And then we check if its value includes 'application/json'.

If it does, then the response should be JSON.

Conclusion

To check if the response of a fetch is a JSON object in JavaScript, we can check the content-type response header.