Author: John Au-Yeung

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

Categories
TypeScript Answers

How to fix error TS2339: Property ‘x’ does not exist on type ‘Y’ with TypeScript?

red and white happy birthday card

To fix error TS2339: Property ‘x’ does not exist on type ‘Y’ with TypeScript, we need to define the property in the interface with the right type.

For instance, we write

interface Images {
  main: string;
  [key: string]: string;
}

const getMain = (images: Images): string => {
  return images.main;
};

to define the Images interface with the main property.

Then we can get the value of the images.main property without an error since the Images interface has the main property and it’s a string.

If the property name and its type matches, then the error should go away.

Categories
JavaScript Answers

How to mock a date in Jest and JavaScript?

Labrador retriever puppy walking on green grass

To set a mock date in Jest and JavaScript, we can use the useFakeTimers and setSystemTime methods.

For instance, we write:

jest
  .useFakeTimers()
  .setSystemTime(new Date('2022-01-01').getTime());

to call useFakeTimers to let us mock timers.

Then we call setSystemTime to set the time of the mock timer by calling it with a timestamp in milliseconds.

Categories
JavaScript Answers

How to fix cannot read properties of undefined (reading ‘push’) error with JavaScript?

Labrador retriever puppy walking on green grass

To fix cannot read properties of undefined (reading ‘push’) error with JavaScript, we should make sure we’re calling push on an array.

For instance, we write

const arr = [1, 2, 3, 4];
arr.push(5);

to call push on arr with 5 to append 5 as the last item of the arr array.

We can check if a variable is an array with the Array.isArray method.

Categories
JavaScript Answers

How to fix hostname/IP does not match certificate’s altnames with Node.js and JavaScript?

Labrador retriever puppy walking on green grass

To fix hostname/IP does not match certificate’s altnames with Node.js and JavaScript, we create a proxy.

For instance, we write

const httpProxy = require("http-proxy");
const proxy = httpProxy.createProxyServer();

proxy.web(req, res, {
  changeOrigin: true,
  target: "https://example.com:3000",
});

to create a proxy with the http-proxy package.

We call createProxyServer to create the proxy.

And we set the target to the destination URL to proxy to.

If we’re using HTTPS, we write

const httpProxy = require("http-proxy");

httpProxy
  .createServer({
    ssl: {
      key: fs.readFileSync("valid-ssl-key.pem", "utf8"),
      cert: fs.readFileSync("valid-ssl-cert.pem", "utf8"),
    },
    target: "https://example.com:3000",
    secure: true,
  })
  .listen(443);

to call createServer to create the proxy server.

We set the SSL key and certificate files.

And we set the target to the destination URL to proxy to.

We set secure to true to let us proxy HTTPS traffic.

Categories
React Answers

How to persist state on refresh with React?

Labrador retriever puppy walking on green grass

To persist state on refresh with React, we use local storage.

For instance, we write

const Counter = () => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    setCount(JSON.parse(window.sessionStorage.getItem("count")));
  }, []);

  useEffect(() => {
    window.sessionStorage.setItem("count", count);
  }, [count]);

  return (
    <div className="App">
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};

to define the Counter component.

In it, we call setCount in the first useEffect callback to get the local storage item with key 'count' with getItem.

And we call setCount to set the count state with the returned value.

We call useEffect with an empty array to load the value on component mount.

Then we call useEffect again to watch the count value.

We call setItem to set the item with key 'count' to the current count value.

Then we add a button that calls setCount to update the count.