Author: John Au-Yeung

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

Categories
JavaScript Answers

How to watch for checkbox change with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to watch for checkbox change with JavaScript.

In this article, we’ll look at how to watch for checkbox change with JavaScript.

How to watch for checkbox change with JavaScript?

To watch for checkbox change with JavaScript, we call addEventListener with 'change' on the checkbox input element.

For instance, we write

<input type="checkbox" />

to add a checkbox input.

Then we write

const checkbox = document.getElementById("myCheckbox");

checkbox.addEventListener("change", (event) => {
  if (event.currentTarget.checked) {
    alert("checked");
  } else {
    alert("not checked");
  }
});

to call addEventListener with 'change' and the change event handler callback to run the callback when we change the value of the checkbox.

In the callback, we use checked property to get the checked value of the checkbox.

Conclusion

To watch for checkbox change with JavaScript, we call addEventListener with 'change' on the checkbox input element.

Categories
JavaScript Answers

How to convert UNIX timestamp to calendar date moment.js and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert UNIX timestamp to calendar date moment.js and JavaScript.

In this article, we’ll look at how to convert UNIX timestamp to calendar date moment.js and JavaScript.

How to convert UNIX timestamp to calendar date moment.js and JavaScript?

To convert UNIX timestamp to calendar date moment.js and JavaScript, we call moment.unix with the timestamp in seconds and format.

For instance, we write

const dateString = moment.unix(value).format("MM/DD/YYYY");

to call moment.unix with the value UNIX timestamp number to parse it into a moment object.

Then we call format with "MM/DD/YYYY" to return a date string in MM/DD/YYYY format according to the timestamp value.

Conclusion

To convert UNIX timestamp to calendar date moment.js and JavaScript, we call moment.unix with the timestamp in seconds and format.

Categories
JavaScript Answers

How to split string on the first white space occurrence with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to split string on the first white space occurrence with JavaScript.

In this article, we’ll look at how to split string on the first white space occurrence with JavaScript.

How to split string on the first white space occurrence with JavaScript?

To split string on the first white space occurrence with JavaScript, we call string’s match method with a regex that match all whitespace characters that comes before other characters.

For instance, we write

const matches = str.match(/^(\S+)\s(.*)/).slice(1);

to call match with /^(\S+)\s(.*)/ to return an array with all the strings whitespace strings that comes after whitespaces.

And then we can get the non-whitespace substring that comes after the first whitespace substring by calling slice with 1.

Conclusion

To split string on the first white space occurrence with JavaScript, we call string’s match method with a regex that match all whitespace characters that comes before other characters.

Categories
React Answers

How to fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want o fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript.

In this article, we’ll look at how to fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript.

How to fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript?

To fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript, we should make sure we only render valid JSX in our React component.

For instance, we write

export default () => {
  //..
  return (
    <div className="col">
      <h1>Mi Casa</h1>
      <p>This is my house y&apos;all!</p>
      {homes.map((home) => (
        <div>{home.name}</div>
      ))}
    </div>
  );
};

to render elements an an array that returns an array of elements in our component.

We call map with a callback to render the homes array into an array of elements that can be rendered with React.

They’re all valid JSX code so no error will be thrown.

Conclusion

To fix Objects are not valid as a React child. If you meant to render a collection of children, use an array instead with JavaScript, we should make sure we only render valid JSX in our React component.

Categories
React Answers

How to fix Invalid hook call. Hooks can only be called inside of the body of a function component with React and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix Invalid hook call. Hooks can only be called inside of the body of a function component with React and JavaScript.

in this article, we’ll look at how to fix Invalid hook call. Hooks can only be called inside of the body of a function component with React and JavaScript.

How to fix Invalid hook call. Hooks can only be called inside of the body of a function component with React and JavaScript?

To fix Invalid hook call. Hooks can only be called inside of the body of a function component with React and JavaScript, we should make sure we call hook functions only on the top level of function components.

For instance, we write

export default () => {
  const classes = useStyles();
  return <AllowanceClass classes={classes} />;
};

to call the useStyles hook at the top of the component.

And then we can use its returned value anywhere in the component.

Conclusion

To fix Invalid hook call. Hooks can only be called inside of the body of a function component with React and JavaScript, we should make sure we call hook functions only on the top level of function components.