Category: JavaScript

Categories
React Answers

How to add a delay onMouseOver event handler with React?

white and brown long coated small dog

Sometimes, we want to add a delay onMouseOver event handler with React.

In this article, we’ll look at how to add a delay onMouseOver event handler with React.

How to add a delay onMouseOver event handler with React?

To add a delay onMouseOver event handler with React, we can use the Lodash debounce function.

For instance, we write:

import React, { useState } from "react";
import { debounce } from "lodash";

export default function App() {
  const [isHovered, setIsHovered] = useState(false);
  console.log(isHovered);

  const debouncedHandleMouseEnter = debounce(() => setIsHovered(true), 500);

  const handlOnMouseLeave = () => {
    setIsHovered(false);
    debouncedHandleMouseEnter.cancel();
  };

  return (
    <div
      onMouseEnter={debouncedHandleMouseEnter}
      onMouseLeave={handlOnMouseLeave}
    >
      hover me
    </div>
  );
}

We defined the isHovered state with useState.

Then we define the debouncedHandleMouseEnter function by passing in the event handler function into Lodash’s debounce function.

We set the debounce delay to 500ms.

Next, we have the handlOnMouseLeave function where we call debouncedHandleMouseEnter.cancel to cancel the calling of the debouncedHandleMouseEnter function when handlOnMouseLeave is called.

Therefore, when we hover over the div, we see isHovered becomes true.

And when we move our mouse away from the div, isHovered becomes false.

Conclusion

To add a delay onMouseOver event handler with React, we can use the Lodash debounce function.

Categories
JavaScript Answers

How to Merge or Flatten an Array of JavaScriprt Arrays?

white and brown long coated small dog

Sometimes, we want to merge or flatten an array of JavaScript arrays.

In this article, we’ll look at how to merge or flatten an array of JavaScript arrays.

Array.prototype.concat

The concat method lets us add the items from arrays passed in as arguments into the array it’s called on.

For instance, we can write:

const arrays = [
  ["1"],
  ["2"],
  ["3"],
  ["4"],
  ["5"],
  ["6"],
];
const merged = [].concat(...arrays);
console.log(merged);

We spread the entries in arrays to the concat method.

The all the entries from the arrays in arrays will be added to the empty array it’s called on and returned.

Therefore, we get [“1”, “2”, “3”, “4”, “5”, “6”] as the result of merged .

Array.prototype.flat

ES2019 comes with the flat method that lets us flatten an array with any level we want.

For instance, we can write:

const arrays = [
  ["1"],
  ["2"],
  ["3"],
  ["4"],
  ["5"],
  ["6"],
];
const merged = arrays.flat(1);
console.log(merged);

Then we get the same result as before.

We pass in 1 to flat to flatten the array one level.

If we don’t pass in an argument, then it’ll flatten recursively until there’re no more arrays left to flatten.

Write Our Own Function

Also, we can write our own function to flatten an array recursively.

For instance, we can write:

const arrays = [["1"], ["2"], ["3"], ["4"], ["5"], ["6"]];const flatten = (arr) => {
  return arr.reduce((flat, toFlatten) => {
    if (Array.isArray(toFlatten)) {
      return flat.concat(...flatten(toFlatten));
    }
    return flat.concat(toFlatten);
  }, []);
};
const merged = flatten(arrays);
console.log(merged);

to create the flatten function.

We check if toFlatten is an array in the callback of reduce .

reduce lets us combine items from multiple arrays into one array.

If it is, then we return the return value flat.concat called with the flatten(toFlatten) spread into concat as arguments.

Otherwise, we just return the result of flat.concat(toFlatten) since toFlatten isn’t an array.

This means we can put it straight into the flat array.

The 2nd argument of reduce is the initial return value of reduce before anything is put into it.

Conclusion

The easiest way to flatten or merge nested arrays is to use the flat method that comes with arrays.

We can also use the concat method to flatten one level of a nested array.

Another choice is to create our own function to flatten an array.

Categories
JavaScript Answers

How to remove item from array using its name / value with JavaScript?

black short coated dog on persons hand

Sometimes, we want to remove item from array using its name / value with JavaScript.

In this article, we’ll look at how to remove item from array using its name / value with JavaScript.

How to remove item from array using its name / value with JavaScript?

To remove item from array using its name / value with JavaScript, we can use the JavaScript array’s findIndex and splice methods.

For instance, we write:

const countries = [{
    id: 'AF',
    name: 'Afghanistan'
  },
  {
    id: 'AL',
    name: 'Albania'
  },
  {
    id: 'DZ',
    name: 'Algeria'
  }
];

const index = countries.findIndex(c => c.id === 'AF')
countries.splice(index, 1)
console.log(countries)

We call countries.findIndex with a callback that finds the entry with id set to 'AF'.

Then we call splice with the index found and 1 to remove the entry with the given index.

Therefore, countries is now:

[
  {
    "id": "AL",
    "name": "Albania"
  },
  {
    "id": "DZ",
    "name": "Algeria"
  }
]

according to the console log.

Conclusion

To remove item from array using its name / value with JavaScript, we can use the JavaScript array’s findIndex and splice methods.

Categories
JavaScript Answers

How to create an array of integers from 1 to 20 in JavaScript?

white and brown shih tzu puppy

Sometimes, we want to create an array of integers from 1 to 20 in JavaScript.

In this article, we’ll look at how to create an array of integers from 1 to 20 in JavaScript.

How to create an array of integers from 1 to 20 in JavaScript?

To create an array of integers from 1 to 20 in JavaScript, we can use the JavaScript array instance’s fill and map methods.

For instance, we write:

const arr = Array(20).fill().map((x, i) => i + 1)
console.log(arr)

We can Array with 20 to create an array with 20 empty slots.

Then we call fill to fill the empty slots with undefined.

Finally, we call map with a callback to return the numbers from 1 to 20.

Therefore, arr is [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].

Conclusion

To create an array of integers from 1 to 20 in JavaScript, we can use the JavaScript array instance’s fill and map methods.

Categories
JavaScript Answers

How to adjust the height of an element to the screen’s height with jQuery?

selective focus photography of white dog

Sometimes, we want to adjust the height of an element to the screen’s height with jQuery.

In this article, we’ll look at how to adjust the height of an element to the screen’s height with jQuery.

How to adjust the height of an element to the screen’s height with jQuery?

To adjust the height of an element to the screen’s height with jQuery, we can call the css method.

For instance, we write:

<div style='background-color: green'>

</div>

to add a div.

Then we write:

const div = $('div');
div.css("height", `${$(window).height()}px`);

We select the div with $.

Then we call div.css with 'height' and the height of window which we get with $(window).height().

We’ve to add the unit at the end to set the height.

Conclusion

To adjust the height of an element to the screen’s height with jQuery, we can call the css method.