Category: React

Sometimes, we want to scroll a div to be visible in React.

In this article, we’ll look at how to scroll a div to be visible in React.

How to scroll a div to be visible in React?

To scroll a div to be visible in React, we use the scrollIntoView method.

For instance, we write

import ReactDOM from "react-dom";
import React, { useRef } from "react";

const Comp = () => {
  const divRef = useRef(null);

  const scrollToDivRef = () => {
    const node = ReactDOM.findDOMNode(divRef.current);
    node.scrollIntoView({ block: "start", behavior: "smooth" });
  };

  return (
    <div>
      ...
      <div ref={divRef} />
    </div>
  );
};

to define the divRef and assign it to the div we want to scroll to.

Then we define the scrollToDivRef function that gets the node that’s assigned to the ref.

And then we call node.scrollIntoView to scroll to the div.

We set behavior to 'smooth' to do smooth scrolling.

Conclusion

To scroll a div to be visible in React, we use the scrollIntoView method.

Sometimes, we want to trigger child re-rendering in React.js.

In this article, we’ll look at how to trigger child re-rendering in React.js.

How to trigger child re-rendering in React.js?

To trigger child re-rendering in React.js, we set the key prop to a new value.

For instance, we write

<ChildComponent key={updatedKey} />;

to set the key prop of ChildComponent to the updatedKey state or prop.

When updatedKey‘s value changes, ChildComponent will be re-rendered.

Conclusion

To trigger child re-rendering in React.js, we set the key prop to a new value.

Sometimes, we want to allow input type=file to select the same file in a React component.

In this article, we’ll look at how to allow input type=file to select the same file in a React component.

How to allow input type=file to select the same file in a React component?

To allow input type=file to select the same file in a React component, we set the file selection to null after we click on the file input button.

For instance, we write

const Comp = () => {
  //...

  return (
    <input
      id="upload"
      ref="upload"
      type="file"
      accept="image/*"
      onInput={(event) => {
        readFile(event);
      }}
      onClick={(event) => {
        event.target.value = null;
      }}
    />
  );
};

to add a file input.

We set the onInput prop to a function that calls readFile to get the file.

And we set the onClick prop to a function that sets event.target.value to null so we can select the same file again.

Conclusion

To allow input type=file to select the same file in a React component, we set the file selection to null after we click on the file input button.

Sometimes, we want to add a br tag in React between two strings.

In this article, we’ll look at how to add a br tag in React between two strings.

How to add a br tag in React between two strings?

To add a br tag in React between two strings, we can use the white-space CSS property.

For instance, we write

const Comp = () => {
  const message = `No results. \n Please try another search term.`;
  return <div className="new-line">{message}</div>;
};

to add the \n new line characters into the message string.

Then we make them render with

.new-line {
  white-space: pre-line;
}

in our CSS file.

Conclusion

To add a br tag in React between two strings, we can use the white-space CSS property.

Sometimes, we want to delay rendering of React components.

In this article, we’ll look at how to delay rendering of React components.

How to delay rendering of React components?

To delay rendering of React components, we use the setTimeout function.

For instance, we write

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

const Delayed = ({ children, waitBeforeShow = 500 }) => {
  const [isShown, setIsShown] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsShown(true);
    }, waitBeforeShow);

    return () => clearTimeout(timer);
  }, [waitBeforeShow]);

  return isShown ? children : null;
};

export default Delayed;

to create the Delayed component.

It renders the children when isShown is true.

isShown is set to true in the setTimeout callback with setIsShown(true); after waitBeforeShow milliseconds, which is in the useEffect callback.

When waitBeforeShow is changed, the useEffect callback is called.

clearTimeout is called right before waitBeforeShow is changed.

Then we use it by writing

export const LoadingScreen = () => {
  return (
    <Delayed>
      <div />
    </Delayed>
  );
};

Conclusion

To delay rendering of React components, we use the setTimeout function.