Author: John Au-Yeung

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

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.

Categories
JavaScript Answers

How to validate google reCAPTCHA v2 using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to validate google reCAPTCHA v2 using JavaScript.

In this article, we’ll look at how to validate google reCAPTCHA v2 using JavaScript.

How to validate google reCAPTCHA v2 using JavaScript?

To validate google reCAPTCHA v2 using JavaScript, we use the grecaptcha.getRespons method.

For instance, we write

const response = grecaptcha.getResponse();

if (response) {
  // ...
} else {
  //...
}

to call grecaptcha.getResponse method to get the captcha validation result.

If response isn’t null, then the captcha is verified.

Otherwise, it’s not.

Conclusion

To validate google reCAPTCHA v2 using JavaScript, we use the grecaptcha.getRespons method.

Categories
JavaScript Answers

How to load local JSON file into variable with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to load local JSON file into variable with JavaScript.

In this article, we’ll look at how to load local JSON file into variable with JavaScript.

How to load local JSON file into variable with JavaScript?

To load local JSON file into variable with JavaScript, we can import the JSON file with import.

For instance, we write

{
  "name": "testing"
}

in example.json.

Then we import example.json and get the name property in the JSON object by writing

import * as data from "./example.json";

const { name } = data;

Conclusion

To load local JSON file into variable with JavaScript, we can import the JSON file with import.