Category: JavaScript

Sometimes, we want to get the position of an element with React Native.

In this article, we’ll look at how to get the position of an element with React Native.

How to get the position of an element with React Native?

To get the position of an element with React Native, we can get it from the View‘s onLayout callback.

For instance, we write

<View
  onLayout={(event) => {
    const layout = event.nativeEvent.layout;
    console.log("height:", layout.height);
    console.log("width:", layout.width);
    console.log("x:", layout.x);
    console.log("y:", layout.y);
  }}
></View>

to add a View with the onLayout prop set to a function that gets the position values from the event.nativeEvent.layout property.

We then get the height, width, x, and y values from the layout object.

Conclusion

To get the position of an element with React Native, we can get it from the View‘s onLayout callback.

Sometimes, we want to add and remove multiple CSS classes to an element with JavaScript.

In this article, we’ll look at how to add and remove multiple CSS classes to an element with JavaScript.

How to add and remove multiple CSS classes to an element with JavaScript?

To add and remove multiple CSS classes to an element with JavaScript, we can use the classList.add and classList.remove methods.

For instance, we write

buttonTop.classList.add("myButton", "myStyle");

to call classList.add on the buttonTop element to add the myButton and myStyle classes.

And we write

buttonTop.classList.remove("myElement", "myButton", "myStyle");

to call classList.add on the buttonTop element to remove the myElement, myButton and myStyle classes.

Conclusion

To add and remove multiple CSS classes to an element with JavaScript, we can use the classList.add and classList.remove methods.

Sometimes, we want to remove empty strings from array while keeping record without a loop with JavaScript.

In this article, we’ll look at how to remove empty strings from array while keeping record without a loop with JavaScript.

How to remove empty strings from array while keeping record without a loop with JavaScript?

To remove empty strings from array while keeping record without a loop with JavaScript, we use the array filter method.

For instance, we write

const arr = ["I", "am", "", "still", "here", "", "man"];
const filteredArr = arr.filter(Boolean);

to call arr.filter with Boolean to return an array with the falsy values filtered out.

Since empty strings are falsy, they won’t be included in the returned array.

Conclusion

To remove empty strings from array while keeping record without a loop with JavaScript, we use the array filter method.

Sometimes, we want to change the first letter of variable to upper case with JavaScript.

In this article, we’ll look at how to change the first letter of variable to upper case with JavaScript.

How to change the first letter of variable to upper case with JavaScript?

To change the first letter of variable to upper case with JavaScript, we can use the string replace method.

For instance, we write

const str = "hello world";
const newStr = str.toLowerCase().replace(/\b[a-z]/g, (letter) => {
  return letter.toUpperCase();
});

to call str.toLowerCase to convert all the letters in str to lower case.

Then we call replace with a regex that gets the first letter of each word.

\b means word boundary, so we get the first lower case letter of each word.

We use the g flag to get all matches.

Then we replace them all with upper case letter by using a function that returns letter.toUpperCase where letter is the match being replaced.

Conclusion

To change the first letter of variable to upper case with JavaScript, we can use the string replace method.

Sometimes, we want to get text of an input text box during onKeyPress with JavaScript.

In this article, we’ll look at how to get text of an input text box during onKeyPress with JavaScript.

How to get text of an input text box during onKeyPress with JavaScript?

To get text of an input text box during onKeyPress with JavaScript, we can handle the input event.

For instance, we write

<input type="text" onInput="showCurrentValue(event)" />
<br />
<span id="label"></span>

to add an input and a span

Then we write

function showCurrentValue(event) {
  const value = event.target.value;
  document.getElementById("label").innerText = value;
}

to define the showCurrentValue function that takes the input value from event.target.value.

And then we get the span with getElementById and set the span’s innerText to value to show the input value in the span.

Conclusion

To get text of an input text box during onKeyPress with JavaScript, we can handle the input event.