Categories
React Answers

How to fix “typeerror: cannot read properties of undefined (reading ‘pathname’)” with React Router?

To fix "typeerror: cannot read properties of undefined (reading ‘pathname’)" with React Router, we should wrap the Router component around our app.

For instance, we write

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

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path="/" component={Main} />
  </Router>,
  document.getElementById("app")
);

to wrap the Router component around our Route components.

Then we can get the pathname property value using this.props.history.location.pathname property in any component set as the value of the component prop in the Route component.

This is because the Router component injects the history prop into the route components.

Categories
React Answers

How to Download PDF in React.js?

To download PDF with React.js, we can add the download attribute to an anchor element.

For instance, we can write:

import React from "react";

export default function App() {
  return (
    <div>
      <a
        href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf"
        download
      >
        Click to download
      </a>
    </div>
  );
}

We just add the download prop to do the download.

If we don’t want to use an anchor element, we can also use the file-saver package to download our file.

To install it, we run:

npm i file-saver

Then we can call the saveAs function from the package by writing:

import React from "react";
import { saveAs } from "file-saver";

export default function App() {
  const saveFile = () => {
    saveAs(
      "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
      "example.pdf"
    );
  };
  return (
    <div>
      <button onClick={saveFile}>download</button>
    </div>
  );
}

The first argument is the URL to download and the 2nd argument is the file name of the downloaded file.

Categories
React Answers

How to pass state to another component with react-router-dom v6 useNavigate hook?

To pass state to another component with react-router-dom v6 useNavigate hook, we can call navigate with an object as the 2nd argument.

For instance, we write

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

const ComponentA = (props) => {
  const navigate = useNavigate();

  const toComponentB = () => {
    navigate("/componentB", { state: { id: 1, name: "sabaoon" } });
  };

  return (
    <>
      <div>
        <a onClick={() => toComponentB()}>Component B</a>
      </div>
    </>
  );
};

export default ComponentA;

to call navigate with the "/componentB" URL path and an object that we want to pass to the component that renders when we go to /componentB.

Then in ComponentB, which is rendered when we go to /componentB, we get the values from the useLocation hook by writing

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

const ComponentB = () => {
  const location = useLocation();

  return (
    <>
      <div>{location.state.name}</div>
    </>
  );
};

export default ComponentB;

We call the useLocation hook to return the object that we passed in as the 2nd argument of navigate in ComponentA.

And then we get the properties from the location object.

Categories
React Answers

How to add a required input with React?

To add a required input with React, we add the required prop to the input.

For instance, we write

<input required />

to add an input with the required prop to make it a required input.

Categories
React Answers

How to add React file download with JavaScript?

To add React file download with JavaScript, we create a link.

And then we can create a hidden link that has the blob’s object URL set as the href attribute and click on the link programmatically to download it.

For instance, we write:

import React from "react";

export default function App() {
  const downloadFile = () => {
    const element = document.createElement("a");
    element.href = url;
    element.download = "filename";
    document.body.appendChild(element);
    element.click();
  };

  return (
    <div>
      <button onClick={downloadFile}>Download txt</button>
    </div>
  );
}

to define the downloadFile function to put the 'hello world' string in a blob and download that as a text file.

In the function, we create an a element with document.createElement.

Next, we set element.href to the fil’s URL.

And we set the file name of the downloaded file by setting the element.download property.

Next, we call document.body.appendChild with the link element to attach it to the body.

Finally, we call element.click to click on the hidden link to download the file.