Author: John Au-Yeung

We can find out which character key is pressed with the e.which property and the String.fromCharCode method.

For instance, if we have the following input:

<input type="text"  />

Then we can listen to the keypress event and check which key is pressed by writing:

const input = document.querySelector('input')  
input.addEventListener('keypress', (e) => {  
  console.log(String.fromCharCode(e.which));  
})

We call String.fromCharCode with e.which in the keypress event handler callback to get the character of the key that’s pressed.

Set the value and onChange Props

To fix the issue when we can’t type inside a React input text field, we should make sure the value and onChange props of the input are set.

To do that, we write:

import React, { useState } from "react";

export default function App() {
  const [searchString, setSearchString] = useState();
  return (
    <div className="App">
      <input
        type="text"
        value={searchString}
        onChange={(e) => setSearchString(e.target.value)}
      />
    </div>
  );
}

We defined the searchString state with the useState hook.

Then we pass that into the value prop as its value.

Then we pass in a function that calls setSearchString with e.target.value so that the searchString state is updated with the inputted value.

We update the searchString state to the value we inputted into the input box so that what we type will display in the input box.

We can detect when a window is resized with jQuery.

For instance, we can write:

$(window).resize(() => {  
  console.log('resized')  
});

to watch the resize event with jQuery on window .

window is the current browser tab.

The callback runs when we resize the window, so 'resized' will be logged when we resize it.

Detect When a Window is Resized Using JavaScript

We can detect when a window is resized with JavaScript.

To do this, we write:

window.addEventListener('resize', () => {  
  console.log('resized')  
});

We listen to the resize event with the addEventListener on the window .

And we have the same callback as the 2nd argument which runs when the resize event is triggered.

Install the react-scripts NPM Package

One way to fix the “‘react-scripts’ is not recognized as an internal or external command” error is to install the react-scripts package.

To do this, we run:

npm install react-scripts --save

Reinstall all NPM Packages

Another way to fix this error is to reinstall all packages.

To do this, we run:

rm -rf node_modules && npm install

on Linux or macOS or:

rm /s /q node_modules && npm install

on Windows.

We can also run:

npm cache clean --force
npm rebuild
npm install

to reinstall all packages.

Reinstall npm audit fix

The npm audit fix command will install any packages that are missing in node_modules but it’s present in package.json .

Reinstall npm update

npm update will update any packages that are present in the project.

So we can run this to reinstall any packages that are missing.

We can use the isBetween method to check if a date is between 2 dates.

For instance, we can write:

const compareDate = moment("15/02/2013", "DD/MM/YYYY");  
const startDate = moment("12/01/2013", "DD/MM/YYYY");  
const endDate = moment("15/01/2013", "DD/MM/YYYY");  
const isBetween = compareDate.isBetween(startDate, endDate)  
console.log(isBetween)

We create the compareDate moment object that we want to check if it’s between startDate and endDate .

To do the comparison, we call isBetween on compareDate with startDate and endDate as the arguments.

Then isBetween is false since compareDate isn’t between startDate and endDate .