Category: JavaScript

Categories
JavaScript Answers

How to Check if an Element is a Div with JavaScript?

white and brown long coated small dog lying on white textile

Sometimes, we want to check if an element is a div with JavaScript.

In this article, we’ll look at how to check if an element is a div with JavaScript.

Check if an Element is a Div with JavaScript

To check if an element is a div with JavaScript, we can get the tagName property of an element.

For instance, if we have the following HTML:

<div>
  foo
</div>
<p>
  bar
</p>

Then we can write:

for (const el of document.querySelectorAll('*')) {
  if (el.tagName.toLowerCase() === "div") {
    //it's a div
    console.log(el)
  } else {
    //it's not a div
  }
}

to select all the elements in the HTML with document.querySelectorAll and loop through the selected elements with the for-of loop.

Then in the loop body, we get the tag name of each element with the tagName property.

We call toLowerCase to convert the tag name to lower case.

Then we can check if el is a div by comparing it against 'div' .

If it’s a div, then we log it.

And we should see the div in the console log.

Conclusion

To check if an element is a div with JavaScript, we can get the tagName property of an element.

Categories
JavaScript Answers

How to Get an Element’s Padding Value Using JavaScript?

girl crawling on white floor while smiling

Sometimes, we want to get an element’s padding value using JavaScript.

In this article, we’ll look at how to get an element’s padding value using JavaScript.

Get an Element’s Padding Value Using JavaScript

To get an element’s padding value using JavaScript, we can use the getComputedStyle and getPropertyValue methods.

For instance, if we have the following HTML:

<div style='padding: 20px'>  
  hello world  
</div>

Then we can get the padding-left value of the div by writing:

const div = document.querySelector('div')  
const paddingLeft = window.getComputedStyle(div, null).getPropertyValue('padding-left')  
console.log(paddingLeft)

We call document.querySelector to get the div.

Then we call window.getComputedStyle with the div to get the computed CSS styles of the div.

Then we call getPropertyValue with 'padding-left' to get the padding-left CSS property value.

Therefore, paddingLeft is '20px' according to the console log.

Conclusion

To get an element’s padding value using JavaScript, we can use the getComputedStyle and getPropertyValue methods.

Categories
React Answers

How to fix the ESLint Error ‘Unexpected block statement surrounding arrow body; move the returned value immediately after the =>’ with React?

Labrador retriever puppy walking on green grass

To fix the ESLint Error ‘Unexpected block statement surrounding arrow body; move the returned value immediately after the =>’ with React, we use parentheses for the arrow function body if all we do is return a value.

For instance, we write

this.state.items.map((item) => (
  <div key={item}>
    <a href={item.mainContact.phoneHref + item.mainContact.phone}>
      <i className="fa fa-phone" />
      <strong>{item.mainContact.phone}</strong>
    </a>
  </div>
));

to call map with a function that returns a div.

We surround the div with parentheses so we return the div implicitly.

Categories
React Answers

How to fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript.

In this article, we’ll look at how to fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript.

How to fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript?

To fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript, we pass in the type to the useRef hook.

For instance, we write

import React, { useRef } from "react";

const Test = () => {
  const node = useRef<HTMLDivElement>(null);

  if (node?.current?.contains()) {
    console.log("current accessed");
  }

  return <div ref={node}></div>;
};

to call useRef to return the node ref.

Then we assign node as the value of the div’s ref prop.

And then we can access the div with node?.current.

Conclusion

To fix the ‘not assignable to type LegacyRef’ error when using React useRef with TypeScript, we pass in the type to the useRef hook.

Categories
React Answers

How to destructure object and ignore one of the results with React?

Labrador retriever puppy walking on green grass

To destructure object and ignore one of the results with React, we can use the rest operator.

For instance, we write

const { styles, ...otherProps } = this.props;
const section = cloneElement(this.props.children, {
  className: styles.section,
  ...otherProps,
});

to get the otherProps object by destructuring.

otherProps has all the properties of this.props except styles.

Then we can use otherProps by spreading it in the object we call cloneElement with.