Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

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

closeup photo of yellow Labrador retriever puppy

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
Vue Answers

How to fix ‘property was accessed during render but is not defined on instance.’ error with Vue.js?

Labrador retriever puppy walking on green grass

To fix ‘property was accessed during render but is not defined on instance.’ error with Vue.js, we should make sure what’s referenced in the template is registered as a prop or defined as a reactive property.

For instance, we write

<template>
  <span>{{ name }}</span>
</template>

<script>
export default {
  name: "NameComponent",
  data() {
    return {
      name: ""
    };
  }
</script>

to define the NameComponent component that has the name reactive property as defined in the object returned by the data method.

Then we reference name in the template to render name‘s value.

Categories
JavaScript Answers

How to cancel a promise with JavaScript?

Labrador retriever puppy walking on green grass

To cancel a promise with JavaScript, we use the AbortController constructor.

For instance, we write

const controller = new AbortController();

const task = new Promise((resolve, reject) => {
  //...
  controller.signal.addEventListener("abort", () => {
    reject();
  });
});

controller.abort();

to create an AbortController object.

Then we create the promise with the Promise constructor called with a callback.

In it, we listen to the abort controller’s abort event by calling controller.signal.addEventListener in the task promise.

We call it with a callback that calls reject to reject the promise, which stops the promise from running.

Then we call controller.abort to cancel the promise, which triggers the abort event on the controller.

Categories
React Answers

How to add React file download with JavaScript?

Labrador retriever puppy walking on green grass

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.