Category: JavaScript

Categories
JavaScript Answers

How to fix referenceerror: localstorage is not defined with JavaScript?

Labrador retriever puppy walking on green grass

To fix referenceerror: localstorage is not defined with JavaScript, we should make sure we spell it correctly and only try to use it in the browser environment.

For instance, we write

const foo = localStorage.getItem("foo");

to call localStorage.getItem with 'foo' to return the value of the local storage entry with key 'foo'.

And we write

localStorage.setItem("foo", 1);

to call setItem to set the item with key 'foo' to value 1.

And we write

localStorage.removeItem("foo");

to call removeItem to remove the item with key 'key'.

We should only try to use these methods in code that runs in the browser.

Categories
React Answers

How to fix ‘cannot be used as a JSX component’ error with TypeScript and React?

Labrador retriever puppy walking on green grass

To fix the error ‘cannot be used as a JSX component’ error with React TypeScript, we need to make sure our component returns a single root element.

For instance, we write

function Items(): JSX.Element {
  return (
    <>
      {items.map((item) => (
        <li>{item.name}</li>
      ))}
    </>
  );
}

to put our array of items in the Items component in a fragment so that the component can be compiled.

We call items.map to render an array of li elements so we need to wrap them with a fragment.

Categories
React Answers

How to add form validation with React MUI?

Labrador retriever puppy walking on green grass

To add form validation with React MUI, we set the error prop to true when there’s an error.

For instance, we write

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function ValidationTextFields() {
  return (
    <Box
      component="form"
      sx={{
        "& .MuiTextField-root": { m: 1, width: "25ch" },
      }}
      noValidate
      autoComplete="off"
    >
      <div>
        <TextField
          error
          id="outlined-error"
          label="Error"
          defaultValue="Hello World"
        />
        <TextField
          error
          id="outlined-error-helper-text"
          label="Error"
          defaultValue="Hello World"
          helperText="Incorrect entry."
        />
      </div>
    </Box>
  );
}

to add the error prop to the TextFields to show a red outline to indicate to the user that the input value is invalid.

Categories
JavaScript Answers

How to convert HTML to PDF with Node.js and JavaScript?

Labrador retriever puppy walking on green grass

To convert HTML to PDF with Node.js and JavaScript, we use the html-pdf-node package.

To install it, we run

npm i html-pdf-node

Then we write

const htmlToPdf = require("html-pdf-node");

const options = { format: "A4" };
const file = { content: "<h1>Welcome to html-pdf-node</h1>" };
const pdfBuffer = await htmlToPdf.generatePdf(file, options);
console.log("PDF Buffer:-", pdfBuffer);

to convert the file.content string into a buffer with the PDF file with the generatePdf function.

We can also write

const htmlToPdf = require("html-pdf-node");

const options = { format: "A4" };
const file = { url: "https://example.com" };
const pdfBuffer = await htmlToPdf.generatePdf(file, options);
console.log("PDF Buffer:-", pdfBuffer);

to call generatePdf to get the PDF from the file.url URL and convert that to a PDF buffer.

A promise is returned so we use await to get the pdfBuffer.

Categories
React Answers

How to fix Invariant Violation: Objects are not valid as a React child error?

Labrador retriever puppy walking on green grass

To fix Invariant Violation: Objects are not valid as a React child error, we should make sure we put items in the braces that can be rendered.

For instance, we write

const Comp = () => {
  return (
    <>
      <p>{"foo"}</p>
      <p>{1}</p>
      <p>{null}</p>
    </>
  );
};

to render 'foo', 1 and null in the p elements.

null will render nothing.

And the other values will be displayed on the screen.

Objects can’t be rendered directly on the screen, so we’ve to convert them to strings with JSON.stringify if we want to show them on the screen.

For instance, we write

const Comp = () => {
  return (
    <>
      <p>{JSON.stringify({ foo: "bar" })}</p>
    </>
  );
};

to call JSON.stringify to convert { foo: "bar" } to a JSON string so they can be rendered.