Category: JavaScript

To set specific property value of all objects in a JavaScript object array, we can use the array map method.

For instance, we write:

const arr = [{
    id: "a1",
    guid: "123",
    value: "abc",
  },
  {
    id: "a2",
    guid: "123",
    value: "def",
  },
  {
    id: "a2",
    guid: "123",
    value: "def",
  },

]
const newArr = arr.map(e => ({
  ...e,
  status: "active"
}));
console.log(newArr)

to call arr.map with a function that returns an object with the entry e spread into a new object.

And then we add the status property to the same object.

Therefore, newArr is

[{
  guid: "123",
  id: "a1",
  status: "active",
  value: "abc"
}, {
  guid: "123",
  id: "a2",
  status: "active",
  value: "def"
}, {
  guid: "123",
  id: "a2",
  status: "active",
  value: "def"
}]

Sometimes, we want to stop label from toggling the input checkbox with JavaScript.

In this article, we’ll look at how to stop label from toggling the input checkbox with JavaScript.

How to stop label from toggling the input checkbox with JavaScript?

To stop label from toggling the input checkbox with JavaScript, we can call preventDefault in the label’s click handler.

For instance, we write:

<label for="checked">checked</label>
<input type="checkbox" id="checked" name="checked">

to add a label and an input.

Then we write:

const label = document.querySelector('label')
label.onclick = (e) => {
  e.preventDefault()
}

to select the label with querySelector.

Then we set label.onclick to a function that calls e.preventDefault to stop the label from toggling the checkbox.

Conclusion

To stop label from toggling the input checkbox with JavaScript, we can call preventDefault in the label’s click handler.

Sometimes, we want to toggle class in the nested component in React and JavaScript.

In this article, we’ll look at how to toggle class in the nested component in React and JavaScript.

How to toggle class in the nested component in React and JavaScript?

To toggle class in the nested component in React and JavaScript, we can use the classnames library.

To install it, we run npm i classnames.

Then we use it by writing:

import React from "react";
import classNames from "classnames";

export default function App() {
  const [active, setActive] = React.useState(false);
  const cx = classNames({ green: active });

  return (
    <>
      <style>{`.green { background-color: green }`}</style>
      <button onClick={() => setActive((a) => !a)}>toggle</button>
      <section className={cx}>hello world</section>
    </>
  );
}

to create the cx variable by calling classNames with an object that has the class name as the key and the condition of which it’s applied as the value.

When active is true, the green class is applied.

And we add a button to toggle the green class by setting onClick to a function that calls setActive to toggle the value of active.

Conclusion

To toggle class in the nested component in React and JavaScript, we can use the classnames library.

To convert from UTC to desired time zone with MomentJS and JavaScript, we can use the moment-timezone library.

To use it, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.34/moment-timezone.min.js" ></script>

to add the moment.js and moment-timezone scripts.

Then we write:

moment.tz.add([
  'America/New_York|EST EDT|50 40|0101|1Lz50 1zb0 Op0'
]);

const d = new Date(2022, 5, 1);
const myTimezone = "America/New_York";
const myDatetimeFormat = "YYYY-MM-DD hh:mm:ss a z";
const myDatetimeString = moment(d).tz(myTimezone).format(myDatetimeFormat);
console.log(myDatetimeString)

to call moment.tz.add to add the time zone data for Eastern time.

Then we create a date d with the Date constructor.

Next, we call moment with d to create a moment object.

Then we call tz with myTimezone to convert the time to the given time zone.

Next, we call format to return a date string with the format specified by myDatetimeFormat.

Therefore, myDatetimeString is '2022-06-01 03:00:00 am EDT'.

Sometimes, we want to dynamically insert an iframe in a div with JavaScript.

In this article, we’ll look at how to dynamically insert an iframe in a div with JavaScript.

How to dynamically insert an iframe in a div with JavaScript?

To dynamically insert an iframe in a div with JavaScript, we can use createElement and appendChild.

For instance, we write:

<div>

</div>

to add a div.

then we write:

const div = document.querySelector('div')
const iframe = document.createElement('iframe')
iframe.src = 'https://example.com'
div.appendChild(iframe)

to select the div with querySelector.

Then we call createElement to create an iframe.

Next, we set the iframe’s src attribute by setting the src property.

Finally, we call div.appendChild with iframe to append the iframe as the child of the div.

Conclusion

To dynamically insert an iframe in a div with JavaScript, we can use createElement and appendChild.