Category: React Answers

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.

Sometimes, we want to register event with React useEffect hooks.

In this article, we’ll look at how to register event with React useEffect hooks.

How to register event with React useEffect hooks

To register event with React useEffect hooks, we can call the window.addEventListener method in the useEffect callback.

For instance, we write

//...

const Comp = () => {
  const [userText, setUserText] = useState("");
  const handleUserKeyPress = useCallback((event) => {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText((prevUserText) => `${prevUserText}${key}`);
    }
  }, []);

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]);

  return (
    <div>
      <blockquote>{userText}</blockquote>
    </div>
  );
};

to create the userText state with the useState hook.

Then we creatr the handleUserKeyPress function that checks for the key that’s pressed.

And we call setUserText to append the key pressed to userText.

Then we call useEffect with a callback that calls window.addEventListener to listen to the keydown event.

And handleUserKeyPress is called when the keydown event is triggered.

The useEffect callback is run when handleUserKeyPress changes.

We return a function that calls window.removeEventListener to remove the keydown listener when handleUserKeyPress changes.

Conclusion

To register event with React useEffect hooks, we can call the window.addEventListener method in the useEffect callback.

Sometimes, we want to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6.

In this article, we’ll look at how to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6.

How to fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6?

To fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6, we should import Navigate instead of Redirect.

For instance, we write

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import Home from "../home/Home";

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/" element={<Navigate replace to="/home" />} />
      </Routes>
    </Router>
  );
}

to use the Navigate component to redirect to the /home route when we go to / as specified by

<Route path="/" element={<Navigate replace to="/home" />} />

Conclusion

To fix ‘Redirect’ is not exported from ‘react-router-dom’ with React Router v6, we should import Navigate instead of Redirect.

Sometimes, we want to correctly catch change or focusOut event on text input in React.

In this article, we’ll look at how to correctly catch change or focusOut event on text input in React.

How to correctly catch change or focusOut event on text input in React?

To correctly catch change or focusOut event on text input in React, we can watch the blur event.

For instance, we write

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log("Triggered because this input lost focus");
      }}
      placeholder="onBlur"
    />
  );
}

to add an input into the Example component.

We set its onBlur prop to a function that’s called when we move our focus away from the input.

Conclusion

To correctly catch change or focusOut event on text input in React, we can watch the blur event.

To go back to the previous route with React Route v4, we can use the history.goBack method.

For instance, we write

//...
import { withRouter } from "react-router-dom";

class Demo extends Component {
  //...
  constructor(props) {
    super(props);
    this.goBack = this.goBack.bind(this);
  }

  goBack() {
    this.props.history.goBack();
  }
  //...
}

export default withRouter(Demo);

to call the this.props.history.goBack method in goBack.

We get the method because we call withRouter with Demo to inject the history prop into the Demo component.

We call this.props.history.goBack method to go back to the previous route.