Category: React

Sometimes, we want to redirect page on click of a button with React Router v6.

In this article, we’ll look at how to redirect page on click of a button with React Router v6.

How to redirect page on click of a button with React Router v6?

To redirect page on click of a button with React Router v6, we use the useNavigate hook.

For instance, we write

import React from "react";
import { useNavigate } from "react-router-dom";

function LoginLayout() {
  let navigate = useNavigate();
  const routeChange = () => {
    let path = `newPath`;
    navigate(path);
  };

  return (
    <div className="app flex-row align-items-center">
      <Container>
        <Button color="primary" className="px-4" onClick={routeChange}>
          Login
        </Button>
      </Container>
    </div>
  );
}

to call the useNavigate hook to return the navigate function.

Then we call navigate with path to navigate to the path in the routeChange function.

Then we assign routeChange as the value of the onClick prop of the Button to navigate to the path on click.

Conclusion

To redirect page on click of a button with React Router v6, we use the useNavigate hook.

Sometimes, we want to display line breaks from saved text area with React.

In this article, we’ll look at how to display line breaks from saved text area with React.

How to display line breaks from saved text area with React?

To display line breaks from saved text area with React, we set the white-space CSS style to pre-line.

For instance, we write

const Comp = () => {
  //...
  return (
    <>
      <style>{`
      #p-wrap {
        white-space: pre-line;
      }
    `}</style>
      <textarea value={address} />
      <p id="p-standard">{address}</p>
      <hr />
      <p id="p-wrap">{address}</p>
    </>
  );
};

to add the textarea and p elements.

We set the element with ID p-wrap to have the white-space style set to pre-line.

Then this p element will display all the line breaks that are entered into the textarea.

Conclusion

To display line breaks from saved text area with React, we set the white-space CSS style to pre-line.

Sometimes, we want to compare objects with React useEffect hook.

In this article, we’ll look at how to compare objects with React useEffect hook.

How to compare objects with React useEffect hook?

To compare objects with React useEffect hook, we can create a hook that keeps the previous value of a state.

For instance, we write

const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const useExample = (apiOptions) => {
  const myPreviousState = usePrevious(apiOptions);
  const [data, updateData] = useState([]);
  useEffect(() => {
    if (myPreviousState && !_.isEqual(myPreviousState, apiOptions)) {
      updateData(apiOptions);
    }
  }, [apiOptions]);
};

to create the usePrevious hook that keeps the value state’s value in a ref.

value is updated on every render since we call useEffect with no 2nd argument.

And then we return the ref’s value.

Then we use the usePrevious hook in the useExample hook.

In it, we call useEffect to run the callback when apiOptions changes.

We get the previous value of apiOptions with the usePrevious hook.

Then we check if the myPreviousState value is the same as apiOptions with the Lodash isEqual method.

Conclusion

To compare objects with React useEffect hook, we can create a hook that keeps the previous value of a state.

Sometimes, we want to fix ESLint with React giving no-unused-vars errors.

In this article, we’ll look at how to fix ESLint with React giving no-unused-vars errors.

How to fix ESLint with React giving no-unused-vars errors?

To fix ESLint with React giving no-unused-vars errors, we can use the eslint-plugin-react plugin.

To install it, we run

npm install --save-dev eslint-plugin-react

Then we add it to .eslintrc.json by writing

{
  //...
  "extends": ["plugin:react/recommended"]
  //...
}

to add the "plugin:react/recommended" rules from the eslint-plugin-react plugin to our project.

Conclusion

To fix ESLint with React giving no-unused-vars errors, we can use the eslint-plugin-react plugin.