Category: JavaScript

Sometimes, we want to fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React.

In this article, we’ll look at how to fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React.

How to fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React?

To fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React, we should make sure we don’t confuse named and default imports.

For instance, we write

import { MyComponent } from "../components/xyz.js";

to import the MyComponent as a named import.

The name matters in a named import.

If MyComponent is a default export, then we write

import MyComponent from "../components/xyz.js";

to import it.

Conclusion

To fix ‘Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object ‘ with React, we should make sure we don’t confuse named and default imports.

Sometimes, we want to get parameter value from query string with React.

In this article, we’ll look at how to get parameter value from query string with React.

How to get parameter value from query string with React?

To get parameter value from query string with React, we use the URLSearchParams constructor.

For instance, we write

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get("bar");

to get the query string with window.location.search.

Then we pass that in as the value of the URLSearchParams constructor.

And then we get the value of the query parameter with key bar with params.get("bar").

Conclusion

To get parameter value from query string with React, we use the URLSearchParams constructor.

Sometimes, we want to fix missing dependency warning when using useEffect React Hook.

In this article, we’ll look at how to fix missing dependency warning when using useEffect React Hook.

How to fix missing dependency warning when using useEffect React Hook?

To fix missing dependency warning when using useEffect React Hook, we should make sure we include any variables that are used in the useEffect callback that are states, props or functions in components.

For instance, we write

const Component = () => {
  /*...*/

  const fetchBusinesses = async () => {
    const res = await fetch("/api/businesses/");
    //...
  };

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  /*...*/
};

to call useEffect with a callback that calls the fetchBusinesses function.

Since fetchBusinesses is a function in the Component component, we should include it in the array in the 2nd argument since it can change with states or props inside the function.

Conclusion

To fix missing dependency warning when using useEffect React Hook, we should make sure we include any variables that are used in the useEffect callback that are states, props or functions in components.