Category: React Answers

Sometimes, we want to add images in public folder with React.

In this article, we’ll look at how to add images in public folder with React.

How to add images in public folder with React?

To add images in public folder with React, we get the path to the public folder with process.env.PUBLIC_URL and concatenate the relative image path to it.

For instance, we write

<img src={process.env.PUBLIC_URL + "/img/logo.png"} />;

to add the img element with the src attribute of the image set to process.env.PUBLIC_URL + "/img/logo.png" to load the image from the /img/logo.png file in the public folder.

We use process.env.PUBLIC_URL to get the path to the public folder.

Conclusion

To add images in public folder with React, we get the path to the public folder with process.env.PUBLIC_URL and concatenate the relative image path to it.

Sometimes, we want to detect Esc key press in React and handle it with JavaScript.

In this article, we’ll look at how to detect Esc key press in React and handle it with JavaScript.

How to detect Esc key press in React and handle it with JavaScript?

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.

For instance, we write

import React, { useEffect } from "react";

const useEscape = (onEscape) => {
  useEffect(() => {
    const handleEsc = (event) => {
      if (event.keyCode === 27) onEscape();
    };
    window.addEventListener("keydown", handleEsc);

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

export default useEscape;

to create the useEscape hook that listens for the esc key press by listening to the keydown event.

In the handleEsc event handler, we listen for keyCode 27, which is the esc key press.

We remove the event handler with removeListener when we unmount the component that uses the hook.

Then we use it in our component by calling useEscape with a callback that does something when esc is pressed like

const [isOpen, setIsOpen] = useState(false);
useEscape(() => setIsOpen(false));

Conclusion

To detect Esc key press in React and handle it with JavaScript, we can create our own hook.

Sometimes, we want to call multiple functions on click with React and JavaScript.

In this article, we’ll look at how to call multiple functions on click with React and JavaScript.

How to call multiple functions on click with React and JavaScript?

To call multiple functions on click with React and JavaScript, we create a function that calls all the functions and use that as the click event handler.

For instance, we write

const App = () => {
  const fun1 = () => {
    console.log("hello");
  };

  const fun2 = () => {
    console.log("world");
  };

  return (
    <div>
      <button
        onClick={() => {
          fun1();
          fun2();
        }}
      >
        Click
      </button>
    </div>
  );
};

to set the onClick prop of the button to a function that calls fun1 and func2 when we click on the button.

Conclusion

To call multiple functions on click with React and JavaScript, we create a function that calls all the functions and use that as the click event handler.

To go back a page with React Router v6, we use the useNavigate hook.

For instance, we write

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

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-1)}>go back</button>
      <button onClick={() => navigate(1)}>go forward</button>
    </>
  );
}

to call useNavigate to return the navigate function.

Then we call navigate with -1 to go back to the previous page.

We can also call navigate with 1 to go to the next page in the history.

Conclusion

To go back a page with React Router v6, we use the useNavigate hook.

Sometimes, we want to add multiple path names for the same component in React Router.

In this article, we’ll look at how to add multiple path names for the same component in React Router.

How to add multiple path names for the same component in React Router v6?

To add multiple path names for the same component in React Router, we can set the element property to the component we want to render.

For instance, we write

import React from "react";
import { BrowserRouter as Router, useRoutes } from "react-router-dom";

const App = () =>
  useRoutes([
    { path: "/home", element: <Home /> },
    { path: "/users", element: <Home /> },
    { path: "/widgets", element: <Home /> },
  ]);

const AppWrapper = () => (
  <Router>
    <App />
  </Router>
);

to render the Home component we navigate to /home, /users, or /widgets by calling the useRoutes hook with an array of routes.

Conclusion

To add multiple path names for the same component in React Router, we can set the element property to the component we want to render.