Categories
React Answers

How to Add a Background Video with React?

Sometimes, we want to add a background video with React.

In this article, we’ll look at how to add a background video with React.

Add a Background Video with React

To add a background video with React, we can add the video element with the autoPlay prop.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div>
      <video loop autoPlay>
        <source
          src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>
    </div>
  );
}

We add the video element with the loop prop to make the video replay after it’s finished.

And the autoPlay prop makes the video start automatically when we load the page.

Conclusion

To add a background video with React, we can add the video element with the autoPlay prop.

Categories
React Answers

How to Check Know When a React ref.current Value Has Changed?

Sometimes, we want to check know when a React ref.current value has changed.

In this article, we’ll look at how to check know when a React ref.current value has changed.

Check Know When a React ref.current Value Has Changed

To check know when a React ref.current value has changed, we can add a callback ref to watch for the ref’s value with a function.

For instance, we write:

import React, { useCallback, useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const onRefChange = useCallback(
    (node) => {
      console.log(node);
    },
    [count]
  );

  return (
    <div>
      <button onClick={() => setCount((c) => c + 1)}>increment</button>
      <p ref={onRefChange}>{count}</p>
    </div>
  );
}

We call the useCallback hook with a function that takes the node parameter.

node is the ref.current value since we pass the returned callback as the value of the ref prop.

We set count as the value to watch in the 2nd argument of useCallback.

Now when we update the count by clicking the button, the useCallback callback should be called.

And we see the node‘s value logged in the console after each change of count.

node is the p element with the latest value of count since we’re watching count‘s value as specified in the 2nd argument of useCallback.

Conclusion

To check know when a React ref.current value has changed, we can add a callback ref to watch for the ref’s value with a function.

Categories
React Answers

How to Fix the “Warning: validateDOMNesting(…): ‘a’ cannot appear as a descendant of ‘a’. ” Error When Developing React Apps?

To fix the "Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>. " error when developing React apps, we should make sure we don’t nest a elements within a elements.

For instance, we instead of writing:

<a href="1">
    <a href="2"></a>
</a>

which is invalid HTML, we write:

<a href="1"></a>
<a href="2"></a>

Browsers will fix the HTML when the code is rendered, which will make React’s virtual DOM different from what’s rendered.

Categories
React Answers

How to Add Event Bubbling and Capturing in React?

Sometimes, we want to add event bubbling and capturing in React.

In this article, we’ll look at how to add event bubbling and capturing in React.

Add Event Bubbling and Capturing in React

To add event bubbling and capturing in React, we can add event handlers to handle them.

To handle bubbling, we just add the regular event handlers.

And to handle capturing, we add Capture to the prop name after the event handler’s prop name.

For instance, we add bubbling by writing:

import React from "react";

export default function App() {
  return (
    <div onClick={() => console.log("parent")}>
      <button onClick={() => console.log("child")}>Click me</button>
    </div>
  );
}

We set the onClick prop of the parent div and the button to log 'parent' and 'child' respectively.

Then when we click the button, we see:

child 
parent 

logged in this order.

So we know event bubbling happened since we child element’s event handler is triggered before the parent’s.

To set event propagation to capturing mode, we add Capture to the end of each prop name.

For instance, we write:

import React from "react";

export default function App() {
  return (
    <div onClickCapture={() => console.log("parent")}>
      <button onClickCapture={() => console.log("child")}>Click me</button>
    </div>
  );
}

to set the onClickCapture prop instead of the onClick prop on each element.

Then we see:

parent 
child 

logged in this order.

So we know event capturing happened since we parent element’s event handler is triggered before the child’s.

Conclusion

To add event bubbling and capturing in React, we can add event handlers to handle them.

To handle bubbling, we just add the regular event handlers.

And to handle capturing, we add Capture to the prop name after the event handler’s prop name.

Categories
React Answers

How to Clear an Input Field with React?

Sometimes, we want to clear an input field with React.

In this article, we’ll look at how to clear an input field with React.

Clear an Input Field with React

To clear an input field with React, we can set the value of the value attribute to an empty string.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [val, setVal] = useState();

  return (
    <div>
      <input type="text" value={val} />
      <button onClick={() => setVal(() => "")}>Reset</button>
    </div>
  );
}

We create the val state with the useState hook.

Then we set the value prop of the input to the val state.

Next we set the onClick prop of the button to a function that calls setVal to an empty string.

Now when we type in something and click Reset, we see the input box emptied.

Conclusion

To clear an input field with React, we can set the value of the value attribute to an empty string.