Author: John Au-Yeung

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

Categories
JavaScript Answers

How to do string and number conversion with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to do string and number conversion with JavaScript.

In this article, we’ll look at how to do string and number conversion with JavaScript.

How to do string and number conversion with JavaScript?

To do string and number conversion with JavaScript, we can use the parseInt function.

For instance, we write

const n = parseInt("123");

to parse string '123' into a number with parseInt.

Conclusion

To do string and number conversion with JavaScript, we can use the parseInt function.

Categories
JavaScript Answers

How to create a set in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to create a set in JavaScript.

In this article, we’ll look at how to create a set in JavaScript.

How to create a set in JavaScript?

To create a set in JavaScript, we can use the Set constructor.

For instance, we write

const set = new Set();
set.add("red");
const hasRed = set.has("red");
set.delete("red");

to create a new set with the Set constructor.

Then we call add to add 'red' into the set.

Next we call has to check if 'red' is in the set.

And then we call delete to remove 'red' from the set.

Conclusion

To create a set in JavaScript, we can use the Set constructor.

Categories
JavaScript Answers

How to add or remove HTML inside div using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to add or remove HTML inside div using JavaScript.

In this article, we’ll look at how to add or remove HTML inside div using JavaScript.

How to add or remove HTML inside div using JavaScript?

To add or remove HTML inside div using JavaScript, we can use the insertAdjacentHTML method.

For instance, we write

const addRow = () => {
  const div = document.getElementById("content");
  div.insertAdjacentHTML("afterbegin", "PUT_HTML_HERE");
};

to define the addRow function.

In it, we call getElementById to get the element with ID content.

Then we call div.insertAdjacentHTML to put HTML at the 'afterbegin' position.

To add HTML after the div.

Conclusion

To add or remove HTML inside div using JavaScript, we can use the insertAdjacentHTML method.

Categories
React Answers

How to get data from the Material UI TextField component?

Labrador retriever puppy walking on green grass

Sometimes, we want to get data from the Material UI TextField component.

In this article, we’ll look at how to get data from the Material UI TextField component.

How to get data from the Material UI TextField component?

To get data from the Material UI TextField component, we can get the input value from the onChange callback.

For instance, we write

import React from "react";
import { useState } from "react";

import TextField from "@material-ui/core/TextField";

const Input = () => {
  const [textInput, setTextInput] = useState("");

  const handleTextInputChange = (event) => {
    setTextInput(event.target.value);
  };

  return (
    <TextField
      label="Text Input"
      value={textInput}
      onChange={handleTextInputChange}
    />
  );
};

export default Input;

to add a TextField with the onChange prop set to the handleTextInputChange function.

In it, we call setTextInput with the event.target.value property which has the input value.

Then we get the input value from the textInput state, which we set as the value of the value prop.

Conclusion

To get data from the Material UI TextField component, we can get the input value from the onChange callback.

Categories
JavaScript Answers

How to filter an array with a function that returns a promise with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to filter an array with a function that returns a promise with JavaScript.

In this article, we’ll look at how to filter an array with a function that returns a promise with JavaScript.

How to filtering an array with a function that returns a promise with JavaScript?

To filter an array with a function that returns a promise with JavaScript, we can use the Promise.all method with the array filter method.

For instance, we write

const filterPromise = async (values, fn) => {
  const booleans = await Promise.all(values.map(fn));
  const filtered = values.filter((_, i) => booleans[i]);
  return filtered;
};

to define the filterPromise function.

In it, we call Promise.all with an array of promises we get from values.map(fn).

Then we call values.filter with a callback that returns an array of filtered values according to the values of booleans[i].

Conclusion

To filter an array with a function that returns a promise with JavaScript, we can use the Promise.all method with the array filter method.