Category: JavaScript

To fix ‘Reference Error: localstorage is not defined’ with React and Next.js, we should check if window is defined before trying to use local storage.

For instance, we write

const ISSERVER = typeof window === "undefined";

if (!ISSERVER) {
  localStorage.get("...");
}

to check if window is 'undefined' with typeof.

If it’s defined, then the app isn’t server-side rendered and we can use browser APIs like localStorage.

To disable a link in React, we use some CSS styles.

For instance, we write

const C = (props) => {
  return (
    <li>
      {props.notClickable ? (
        <Link
          to="/"
          className="disabledCursor"
          onClick={(event) => event.preventDefault()}
        >
          Link
        </Link>
      ) : (
        <Link to="/" className="notDisabled">
          Link
        </Link>
      )}
    </li>
  );
};

to add Link components.

Then we event.preventDefault() to disable the default behavior when responding to clicks.

And we change the cursor when we hover over the disabled link with

.disabledCursor { 
  cursor: default;
}

To pass data using React-Native Navigation, we call navigation.navigate with an object with the data we want to send.

For instance, we write

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate("Details", {
            itemId: 86,
            otherParam: "anything you want here",
          });
        }}
      />
    </View>
  );
}

to call navigation.navigate with an object with some data we want to send to the destination screen.

Then in the destination component, we get the values with

const { itemId, otherParam } = props.navigation.state;

To fix ‘Type ‘null’ is not assignable to type ‘HTMLInputElement” error in React and TypeScript, we can create a type guard function.

Then we use that to check if the ref is an HTMLInputElement.

For instance, we write

const isInputElement = (elem: HTMLElement | null): elem is HTMLInputElement => {
  if (!elem) {
    return false;
  }
  return elem.tagName === "INPUT";
};

if (isInputElement(textInput)) {
  console.log(elem.value);
}

//...

<input
  ref={textInput}
  type="text"
  placeholder="Search"
/>

to create the isInputElement type guard.

Then we check if elem is falsy and return false if it is.

Otherwise we check if the tagName of the elem object if 'INPUT'.

Then we check if the textInput ref is an input element with isInputElement.

And then we get the value property.

To prevent multiple copies Of React from loading, we put the path of React into our Webpack config.

For instance, we write

module.exportrs = {
  resolve: {
    alias: {
      react: path.resolve("node_modules/react"),
    },
  },
};

in webpack.config.js to set the alias for react to path.resolve("node_modules/react").

Then when react is imported, it’s imported from the path returned from path.resolve("node_modules/react")