Author: John Au-Yeung

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

Categories
JavaScript Answers

How to determine original size of image cross browser with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to determine original size of image cross browser with JavaScript.

In this article, we’ll look at how to determine original size of image cross browser with JavaScript.

How to determine original size of image cross browser with JavaScript?

To determine original size of image cross browser with JavaScript, we get the dimensions from the image element’s onload callback.

For instance, we write

const newImg = new Image();

newImg.onload = () => {
  const { height, width } = newImg;
  console.log(width, height);
};

newImg.src = imgSrc;

to create an img element with the Image constructor.

Then we set its onload property to a function that gets the width and height of the image.

We then set the src property of the image to imgSrc which will trigger onload to run.

Conclusion

To determine original size of image cross browser with JavaScript, we get the dimensions from the image element’s onload callback.

Categories
JavaScript Answers

How to copy text from a div to clipboard with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to copy text from a div to clipboard with JavaScript.

In this article, we’ll look at how to copy text from a div to clipboard with JavaScript.

How to copy text from a div to clipboard with JavaScript?

To copy text from a div to clipboard with JavaScript, we can use the document.execCommand method.

For instance, we write

const range = document.createRange();
range.selectNode(document.getElementById("a"));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("copy");
window.getSelection().removeAllRanges();

to create the range object with createRange.

Then we call selectNode with the element we want to copy text from.

Next we call removeAllRanges to remove all existing selections.

Then we call addRange to add the new range.

We call execCommand with 'copy' to copy the element’s text into the clipboard.

Finally, we call removeAllRanges to remove the selected text.

Conclusion

To copy text from a div to clipboard with JavaScript, we can use the document.execCommand method.

Categories
React Answers

How to update states onChange in an array of objects in React Hooks?

Labrador retriever puppy walking on green grass

Sometimes, we want to update states onChange in an array of objects in React Hooks.

In this article, we’ll look at how to update states onChange in an array of objects in React Hooks.

How to update states onChange in an array of objects in React Hooks?

To update states onChange in an array of objects in React Hooks, we can return a new array with the new input value.

For instance, we write

const Comp = () => {
  const [data, setData] = useState([
    {
      id: 1,
      name: "john",
      gender: "m",
    },
    {
      id: 2,
      name: "mary",
      gender: "f",
    },
  ]);

  const updateFieldChanged = (index) => (e) => {
    const newArr = data.map((item, i) => {
      if (index === i) {
        return { ...item, [e.target.name]: e.target.value };
      } else {
        return item;
      }
    });
    setData(newArr);
  };

  return (
    <>
      {data.map((datum, index) => {
        <li key={datum.name}>
          <input
            type="text"
            name="name"
            value={datum.name}
            onChange={updateFieldChanged(index)}
          />
        </li>;
      })}
    </>
  );
};

to define the data state with useState.

Then we define the updateFieldChanged function that calls data.map with a callback that checks if index is i.

If it is, then we return a new object with the existing properties of item.

And we add the [name] property and set it to the e.target.value input value.

Then we call setData with newArr to update the state to the array returned by map.

Finally, we render the li elements with the inputs inside.

And we set the onChange prop to the function returned by updateFieldChanged called with index.

Conclusion

To update states onChange in an array of objects in React Hooks, we can return a new array with the new input value.

Categories
JavaScript Answers

How to use array push() to insert unique items with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to use array push() to insert unique items with JavaScript.

In this article, we’ll look at how to use array push() to insert unique items with JavaScript.

How to use array push() to insert unique items with JavaScript?

To use array push() to insert unique items with JavaScript, we can use a set.

For instance, we write

const items = new Set();
items.add(item);
console.log([...items]);

to create a new set with the Set constructor.

Then we call add to add a new item to the set.

Sets can’t have duplicate items, so only the last one with the same value is kept.

And then we can use the spread operator to convert items back to an array.

Conclusion

To use array push() to insert unique items with JavaScript, we can use a set.

Categories
JavaScript Answers

How to concatenate two JSON objects with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to concatenate two JSON objects with JavaScript.

In this article, we’ll look at how to concatenate two JSON objects with JavaScript.

How to concatenate two JSON objects with JavaScript?

To concatenate two JSON objects with JavaScript, we can use the object spread operator.

For instance, we write

const obj = { ...sourceObj1, ...sourceObj2 };

to put the properties of sourceObj1 and sourceObj2 into the new object after making a shallow copy of the 2 objects.

Then we assign the new object to obj.

Conclusion

To concatenate two JSON objects with JavaScript, we can use the object spread operator.