Category: JavaScript Answers

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 .

We can get all attributes of an element with JavaScript by using the node.attributes property.

For instance, if we have the following HTML:

<div style='color: red' class="myDiv" id="myDiv">

</div>

Then we can write:

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)

to get all the attributes of the div into an object.

We spread the node.attributes object into an array.

Then we call reduce on the array to add all the attribute.name property with attribute.value into the attrs object with the callback

We return attrs in the callback.

In the 2nd argument, we pass in an empty object to set that as the value of attrs .

Therefore, attrs is:

{style: "color: red", class: "myDiv", id: "myDiv"}

Get All Attributes of an Element Using jQuery

We can use the jQuery each method to loop through all the attributes and the attribute name as the property name and the attribute value as the value of the property.

To do this, we write:

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)

We destructure the div returned from the $ function.

Then we create the empty attrs object.

Next, we call each with node.attrbiutes to loop through all the attributes.

And in the callback, we populate attrs with attribute.name as the property name and attribute.value as the property value.

And we get the same result as before.