Author: John Au-Yeung

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

Categories
React Answers

How to Put a File in a State Variable with React Hooks?

selective focus photography of seal lying on ground

Sometimes, we want to put a file in a state variable with React Hooks.

In this article, we’ll look at how to put a file in a state variable with React Hooks.

Put a File in a State Variable with React Hooks

We can put a file in a state variable with the useState hook.

For instance, we can write:

import React, { useState } from "react";

export default function App() {
  const [picture, setPicture] = useState([]);
  console.log(picture);

  return (
    <div className="App">
      <input
        type="file"
        onChange={(e) => {
          const [file] = e.target.files;
          setPicture((picture) => [...picture, file]);
        }}
      />
    </div>
  );
}

We define the picture state with the useState hook.

Then we add a file input by setting the type attribute of the input to file .

And then we add an onChange callback that takes the selected file from e.target.files with destructuring.

Then we call setPicture with a callback that takes the existing picture state value and return a new array with the picture items spread into it and the newly selected file .

Now when we select files with the file input, pictures should log an array with all the selected files.

Conclusion

We can put a file in a state variable with the useState hook.

Categories
JavaScript Answers

How to Determine the Number of Days in a Month with JavaScript?

Seal lying on rock covered with snow

We can use the getDate method to get the number of days in a month with JavaScript.

For instance, we can write:

const numDays = (y, m) => new Date(y, m, 0).getDate();  
console.log(numDays(2020, 2));

We call the Date constructor with the y year, m month, and day 0 to create the Date instance with the last date of the given month.

Then we call getDate to get the value of the last day of the month m — 1according to the calendar.

Therefore, the console log should log 29 since February 2020 has 29 days.

Determine the Number of Days in a Month with moment.js

Also, we can use the daysInMonth method that comes with momenbt.js to get the number of days in a month.

For instance, we can write:

const numDays = moment("2020-02", "YYYY-MM").daysInMonth()  
console.log(numDays);

to parse the year and month with the moment function into a moment object.

Then we call daysInMonth to get the number of days in the month for the given month.

So numDays is 29.

Categories
JavaScript Answers

How to Convert a JavaScript Number Variable to a Currency Value?

white seal on soil

Convert a JavaScript Number Variable to a Currency Value with the Intl.NumberFormat Constructor

We can convert a JavaScript number variable to a currency value with the Intl.NumberFormat constructor.

For instance, we can write:

const formatter = new Intl.NumberFormat("en", {
  style: "currency",
  currency: "GBP"
});

console.log(formatter.format(1234.5));

to format 1234.5 into a currency value denominated in GBP.

We use the Intl.NumberFormat constructor with the locale as the first argument.

The 2nd argument is an object with some options.

The style is set to 'currency' to format it into a currency value.

And currency is set to 'GBP' to format it into British Pound.

Then we call formatter.format with the number to return the string with the currency value.

Therefore, the console log should log '£1,234.50' .

Categories
JavaScript Answers

How to Make a Number a Percentage with JavaScript?

shallow focus photography of brown seal lying on stone

We can make a number a percentage with basic arithmetic operators.

For instance, we can write:

const number1 = 4.954848;
const number2 = 5.9797;
console.log(Math.floor((number1 / number2) * 100));

to get the percentage of number1 of number2 by dividing number1 by number2 .

Then we multiply that by 100 to get the percentage point.

And then we call Math.floor to round the returned result down to the nearest integer.

We should get 82 from the console log.

Make a Number a Percentage with JavaScript with the toLocaleString Method

Also, we can make a number a percentage with the toLocaleString method.

For instance, we can write:

const number1 = 4.954848;
const number2 = 5.9797;
const percentage = (number1 / number2).toLocaleString("en", {
  style: "percent"
})
console.log(percentage);

We divide number1 by number2 .

Then we call toLocaleString on the returned result with the 'en' locale and an object with style set to 'percent' to return a string with the percentage of number1 divided by number2 .

We should get '83%' from the console log.

Categories
JavaScript Answers

How to Play a Notification Sound on Websites with JavaScript?

brown beaver standing on gray rocks during daytime

We can play a notification sound on websites with JavaScript by creating an audio player object with the Audio constructor.

For instance, if we have the following button:

<button>Play</button>

Then we can use the Audio constructor to play an audio clip when we click it by writing:

const playSound = (url) => {
  const audio = new Audio(url);
  audio.play();
}

const button = document.querySelector('button')
button.addEventListener('click', () => {
  playSound('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
})

We create the playSound function that takes the audio url .

And we pass the url into the Audio constructor to create the audio player object.

Next, we call play to play the audio file at the given url .

Then we get the button with document.querySelector .

And then we call addEventListener to add a click listener to the button.

In the event handler callback, we call playSound with the URL of the audio file we want to play.

Now when we click the button, the audio at the given URL should play.

Conclusion

We can play a notification sound on websites with JavaScript by creating an audio player object with the Audio constructor.