Category: JavaScript

Categories
JavaScript Answers

How to set a cookie with expire time with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to set a cookie with expire time with JavaScript.

In this article, we’ll look at how to set a cookie with expire time with JavaScript.

How to set a cookie with expire time with JavaScript?

To set a cookie with expire time with JavaScript, we can set the expires value in the cookie.

For instance, we write

const display = () => {
  const now = new Date();
  const time = now.getTime();
  const expireTime = time + 1000 * 36000;
  now.setTime(expireTime);
  document.cookie = `cookie=ok;expires=${now.toUTCString()};path=/`;
};

to define the display function.

In it, we set document.cookie to a string that has the expires value set to the date string converted from the now date.

We call toUTCString to get a UTC date time string.

time and expireTime are timestamps in milliseconds

Conclusion

To set a cookie with expire time with JavaScript, we can set the expires value in the cookie.

Categories
JavaScript Answers

How to get binary (base64) data from HTML5 canvas with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get binary (base64) data from HTML5 canvas with JavaScript.

In this article, we’ll look at how to get binary (base64) data from HTML5 canvas with JavaScript.

How to get binary (base64) data from HTML5 canvas with JavaScript?

To get binary (base64) data from HTML5 canvas with JavaScript, we can use the canvas toDataURL method.

For instance, we write

const jpegUrl = canvas.toDataURL("image/jpeg");
const pngUrl = canvas.toDataURL();

to call toDataURL with the MIME type of the image to return.

The canvas data will be returned as a base64 string.

If no argument is set, then a PNG image base64 string is returned.

Conclusion

To get binary (base64) data from HTML5 canvas with JavaScript, we can use the canvas toDataURL method.

Categories
React Answers

How to render an array of objects in React?

Labrador retriever puppy walking on green grass

Sometimes, we want to render an array of objects in React.

In this article, we’ll look at how to render an array of objects in React.

How to render an array of objects in React?

To render an array of objects in React, we can use the array map method.

For instance, we write

const Item = (props) => {
  return <li>{props.message}</li>;
};

const TodoList = () => {
  const todos = ["foo", "bar", "baz"];

  return (
    <ul>
      {todos.map((message) => (
        <Item key={message} message={message} />
      ))}
    </ul>
  );
};

to call todos.map with a callback toi render the Item component with the message value.

We set the key prop to a unique value for each entry so that React can identify each item being rendered.

Conclusion

To render an array of objects in React, we can use the array map method.

Categories
JavaScript Answers

How to change the buttons text using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to change the buttons text using JavaScript.

In this article, we’ll look at how to change the buttons text using JavaScript.

How to change the buttons text using JavaScript?

To change the buttons text using JavaScript, we set the innerText property.

For instance, we write

document.getElementById('ShowButton').innerText = 'Show filter';

to select the button with getElementById.

Then we set the innerText property of the button to the text we want to show the button with the text we set.

Conclusion

To change the buttons text using JavaScript, we set the innerText property.

Categories
React Answers

How to put an icon inside a TextInput in React Native?

Labrador retriever puppy walking on green grass

Sometimes, we want to put an icon inside a TextInput in React Native.

In this article, we’ll look at how to put an icon inside a TextInput in React Native.

How to put an icon inside a TextInput in React Native?

To put an icon inside a TextInput in React Native, we can use the TextInput component in the react-native-paper module.

We import it with

import { TextInput } from "react-native-paper";

Then we add the TextInput with the icon with

<TextInput
  label="Password"
  secureTextEntry
  right={<TextInput.Icon name="eye" />}
/>;

We set the right prop to the Icon to show the eye icon on the right of the input.

Conclusion

To put an icon inside a TextInput in React Native, we can use the TextInput component in the react-native-paper module.