Author: John Au-Yeung

Sometimes, we want to add onChange event for contentEditable elements with React.

In this article, we’ll look at how to add onChange event for contentEditable elements with React.

How to add onChange event for contentEditable elements with React?

To add onChange event for contentEditable elements with React, we can listen to the input event on the contentEditable elements.

For instance, we write

<div
  contentEditable="true"
  onInput={(e) => console.log(e.currentTarget.textContent)}
>
  Text inside div
</div>

to add a contentEditable div into our component.

We listen for changes to its contents by setting onInput to a function that runs when the content changes.

Then we get the latest content of the div with e.currentTarget.textContent.

Conclusion

To add onChange event for contentEditable elements with React, we can listen to the input event on the contentEditable elements.

Sometimes, we want to globally replace a forward slash in a JavaScript string.

In this article, we’ll look at how to globally replace a forward slash in a JavaScript string.

How to globally replace a forward slash in a JavaScript string?

To globally replace a forward slash in a JavaScript string, we call the string replace method with a regex with the g flag.

For instance, we write

const s = "/string/".replace(/\//g, "ForwardSlash");

to call '/string/'.replace with the regex /\//g and 'ForwardSlash' to replace the forward slashes in '/string/' with 'ForwardSlash'.

Conclusion

To globally replace a forward slash in a JavaScript string, we call the string replace method with a regex with the g flag.

Sometimes, we want to use map() on an array in reverse order with JavaScript.

In this article, we’ll look at how to use map() on an array in reverse order with JavaScript.

How to use map() on an array in reverse order with JavaScript?

To use map() on an array in reverse order with JavaScript, we can use the array reverse method.

For instance, we write

const reversed = myArray
  .slice(0)
  .reverse()
  .map((a) => {
    //...
  });

to call myArray with slice to make a copy of the array.

Then we can reverse to reverse the copied array.

Next, we call map with a callback to map the reversed array’s values to the ones we want.

Conclusion

To use map() on an array in reverse order with JavaScript, we can use the array reverse method.

Sometimes, we want to fix jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL error with JavaScript.

In this article, we’ll look at how to fix jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL error with JavaScript.

How to fix jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL error with JavaScript?

To fix jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL error with JavaScript, we should make sure done is called when async code is finished running.

For instance, we write

it("should work", (done) => {
  //...
});

it("should work", () => {
  //...
});

to get the done function in the parameter of the first test.

And we should call it after async code is run in the first test if there’s any.

Conclusion

To fix jasmine: Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL error with JavaScript, we should make sure done is called when async code is finished running.

Sometimes, we want to check if two arrays have the same values with JavaScript.

In this article, we’ll look at how to check if two arrays have the same values with JavaScript.

How to check if two arrays have the same values with JavaScript?

To check if two arrays have the same values with JavaScript, we can use the array every method.

For instance, we write

const set1 = new Set(arr1);
const set2 = new Set(arr2);
return (
  arr1.every((item) => set2.has(item)) && arr2.every((item) => set1.has(item))
);

to convert arrays arr1 and arr2 to sets.

And then we call arr1.every with a callback to see if set2 has the item in arr1.

Then we call arr2.every with a callback to see if set1 has the item in arr2.

If both every call return true, then both arrays have the same values.

Conclusion

To check if two arrays have the same values with JavaScript, we can use the array every method.