Author: John Au-Yeung

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

Categories
TypeScript Answers

How to fix the “TS7053 Element implicitly has an ‘any’ type” error in TypeScript?

closeup photo of yellow Labrador retriever puppy

To fix the "TS7053 Element implicitly has an ‘any’ type" error in TypeScript, we can create a type with an index signature that allows any properties to be in the object.

For instance, we write

const myObj: { [index: string]: any } = {};

to set myObj to the { [index: string]: any } type so that the object assigned can have any properties in it.

The { [index: string]: any } type is an object type that allows any string keys as its property name and any value as their values.

The error will then go away since we set myObj to an object literal.

Categories
React Answers

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

Labrador retriever puppy walking on green grass

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?

white long coat small dog

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

How to Scroll to an Element with Vue 3 and JavaScript?

Labrador retriever puppy walking on green grass

To Scroll to an Element with Vue 3 and JavaScript, we can scroll to an element with Vue.js by assigning a ref to the element we want to scroll to.

Then we can scroll to the element by calling the scrollIntoView method on the element assigned to the ref.

For instance, we can write:

<template>
  <div id="app">
    <button @click="scrollToElement">scroll to last</button>
    <p v-for="n of 100" :key="n" :ref="n === 100 ? 'last' : undefined">
      {{ n }}
    </p>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    scrollToElement() {
      const [el] = this.$refs.last;
      if (el) {
        el.scrollIntoView({ behavior: "smooth" });
      }
    },
  },
};
</script>

We have the scroll to last button that calls scrollToElement .

Then we have some p element with the last ref being assigned to the last p element.

In the scrollToElement method, we get the element assigned to the last ref with this.$refs.last via destructuring.

Then we call el.scrollIntoView with an object that has the behavior property to change the scroll behavior.

Categories
JavaScript Answers

How to fix “uncaught typeerror: cannot read properties of null (reading ‘addEventListener’)” error with JavaScript?

Labrador retriever puppy walking on green grass

To fix "uncaught typeerror: cannot read properties of null (reading ‘addEventListener’)" error with JavaScript, we should make sure the element we’re calling addEventListener on isn’t null.

For instance, we write

const el = document.getElementById("overlayBtn");
if (el) {
  el.addEventListener("click", onClick, false);
}

to call getElementById to get the element we want to add the click listener to.

Then if el isn’t null, then we call addEventListener on it to add the onClick function as its click event listener.