Category: JavaScript

Categories
React Answers

How to do API call in React?

Labrador retriever puppy walking on green grass

Sometimes, we want to do API call in React.

In this article, we’ll look at how to do API call in React.

How to do API call in React?

To do API call in React, we call the useEffect hook.

For instance, we write

import React, { useState, useEffect } from "react";

const Comp = () => {
  //...
  useEffect(() => {
    fetchDataFromBackend();
  }, []);
  //...
};

to call useEffect in the Comp component with a callback that calls fetchDataFromBackend to make the request to the API we want.

We call useEffect with an empty array so that the callback only runs when the component mounts.

Conclusion

To do API call in React, we call the useEffect hook.

Categories
TypeScript Answers

How to declare return types for functions in TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to declare return types for functions in TypeScript.

In this article, we’ll look at how to declare return types for functions in TypeScript.

How to declare return types for functions in TypeScript?

To declare return types for functions in TypeScript, we put it after the colon and before the function body.

For instance, we write

const sum = (a: number, b: number): number => a + b;

to set the return type of the sum to number with : number before the function body.

Conclusion

To declare return types for functions in TypeScript, we put it after the colon and before the function body.

Categories
JavaScript Answers

How to detect that the browser has no mouse and is touch-only with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect that the browser has no mouse and is touch-only with JavaScript.

In this article, we’ll look at how to detect that the browser has no mouse and is touch-only with JavaScript.

How to detect that the browser has no mouse and is touch-only with JavaScript?

To detect that the browser has no mouse and is touch-only with JavaScript, we can detect if the device supports hovering with window.matchMedia.

For instance, we write

if (window.matchMedia("(any-hover: none)").matches) {
  // ...
}

to call window.matchMedia with "(any-hover: none)" to check if the device supports hovering over content with the mouse.

And we use matches to return whether this is true or false.

Conclusion

To detect that the browser has no mouse and is touch-only with JavaScript, we can detect if the device supports hovering with window.matchMedia.

Categories
JavaScript Answers

How to use querySelectorAll with multiple conditions with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use querySelectorAll with multiple conditions with JavaScript.

In this article, we’ll look at how to use querySelectorAll with multiple conditions with JavaScript.

How to use querySelectorAll with multiple conditions with JavaScript?

To use querySelectorAll with multiple conditions with JavaScript, we can call querySelectorAll with all the selectors separated by a comma.

For instance, we write

const list = document.querySelectorAll("form, p, legend");

to select all form, p, and legend elements in the document.

Conclusion

To use querySelectorAll with multiple conditions with JavaScript, we can call querySelectorAll with all the selectors separated by a comma.

Categories
React Answers

How to loop and render elements in React without an array of objects to map?

Labrador retriever puppy walking on green grass

Sometimes, we want to loop and render elements in React without an array of objects to map.

In this article, we’ll look at how to loop and render elements in React without an array of objects to map.

How to loop and render elements in React without an array of objects to map?

To loop and render elements in React without an array of objects to map, we create an array.

For instance, we write

const Comp = ({ level }) => {
  //...
  return Array.from({ length: level }, (item, index) => (
    <span className="indent" key={index}></span>
  ));
};

to call Array.from with { length: level } to create an array with the length set to level.

Then we call it with a callback that maps the empty array entries to spans.

Conclusion

To loop and render elements in React without an array of objects to map, we create an array.