Category: JavaScript Answers

Categories
JavaScript Answers

How to detect Shift + Enter press in React onKeyPress event?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to detect Shift + Enter press in React onKeyPress event.

In this article, we’ll look at how to detect Shift + Enter press in React onKeyPress event.

How to detect Shift + Enter press in React onKeyPress event?

To detect Shift + Enter press in React onKeyPress event, we can check if shift+enter is pressed from the keypress event object.

For instance, we write:

import React from "react";

export default function App() {
  const handleKeyPress = (e) => {
    if (e.key === "Enter" && e.shiftKey) {
      console.log("pressed shift+enter");
    }
  };

  return (
    <div>
      <input onKeyPress={handleKeyPress} />
    </div>
  );
}

to set the onKeyPress prop of the input to the handleKeyPress function.

We check if e.key is 'Enter' and e.shiftKey is true to check if shift+enter is pressed.

Therefore, if we press both keys together, we see "pressed shift+enter" logged.

Conclusion

To detect Shift + Enter press in React onKeyPress event, we can check if shift+enter is pressed from the keypress event object.

Categories
JavaScript Answers React Answers

How to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript.

In this article, we’ll look at how to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript.

How to fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript?

To fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript, we should call React.forwardRef with the function component that we want to assign the ref to.

For instance, we write:

import React from "react";

const Input = React.forwardRef(({ backgroundColor }, ref) => {
  return <input style={{ backgroundColor }} ref={ref} />;
});

export default function App() {
  const ref = React.useRef();

  React.useEffect(() => {
    ref.current.focus();
  }, []);

  return (
    <div>
      <Input backgroundColor="green" ref={ref} />
    </div>
  );
}

to create the Input function component and assign a ref to it.

We set the ref prop to the ref parameter in the Input component.

Then in App, we create a ref with the useRef hook and assign the ref prop to the ref.

And we call ref.current.focus in the useEffect callback.

Now the input should be focused when we load the page.

Conclusion

To fix the ‘Function components cannot have refs. Did you mean to use React.forwardRef()?’ error with React and JavaScript, we should call React.forwardRef with the function component that we want to assign the ref to.

Categories
JavaScript Answers React Answers

How to add the linear-gradient background style with React and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to add the linear-gradient background style with React and JavaScript.

In this article, we’ll look at how to add the linear-gradient background style with React and JavaScript.

How to add the linear-gradient background style with React and JavaScript?

To add the linear-gradient background style with React and JavaScript, we can set the style in the style prop.

For instance, we write:

import React from "react";

const somePic = "https://picsum.photos/200/300";

export default function App() {
  return (
    <div>
      <div
        style={{
          background: `linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic})`,
          width: 200,
          height: 300
        }}
      ></div>
    </div>
  );
}

to set the background property to linear-gradient(190deg, #fa7c30 30%, rgba(0, 0, 0, 0)30%), url(${somePic}) to set the background of the div to a gradient with an image.

Conclusion

To add the linear-gradient background style with React and JavaScript, we can set the style in the style prop.

Categories
JavaScript Answers

How to replace local storage data for an already existing key with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to replace local storage data for an already existing key with JavaScript.

In this article, we’ll look at how to replace local storage data for an already existing key with JavaScript.

How to replace local storage data for an already existing key with JavaScript?

To replace local storage data for an already existing key with JavaScript, we can get the value with getItem, change the returned value, and then save it with setItem.

For instance, we write:

localStorage.setItem('string', 'foo')
const s = localStorage.getItem('string')
localStorage.setItem('string', `${s}bar`)

We call setItem with the key and value to add an entry with key string and value 'foo'.

Then we get the item with key string with getitem.

Next, we call setItem again with the same key and a different value to save the value for the same key.

Conclusion

To replace local storage data for an already existing key with JavaScript, we can get the value with getItem, change the returned value, and then save it with setItem.

Categories
JavaScript Answers

How to add sources to HTML5 video in JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to add sources to HTML5 video in JavaScript.

In this article, we’ll look at how to add sources to HTML5 video in JavaScript.

How to add sources to HTML5 video in JavaScript?

To add sources to HTML5 video in JavaScript, we can create a new source element with createElement.

For instance we write:

const source = document.createElement('source');
source.src = 'http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv';
source.type = 'video/ogg';

const video = document.createElement('video');
video.controls = true
video.appendChild(source);

document.body.appendChild(video);

We call createElement with 'source' to create a source element.

Then we set the src and type attributes of it by setting their respective properties.

Next, we call createElement again to create a video element.

And we set the controls property to true to set the controls attribute to true.

Then we append the source element as the child of video with appendChild.

And then we append the video element as the child of body with document.body.appendChild.

Conclusion

To add sources to HTML5 video in JavaScript, we can create a new source element with createElement.