CODEWITHSUNDEEP
javascripthtmlcssreactjsecmascript-6
Nesh
Nesh

Reputation: 2551

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined React

Following is the react code which is giving me error -

Error -

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Star.

Code -

App.js

import "./styles.css";
import { FaStar } from 'react-icons';

function Star() {
  return (
    <FaStar />
  )
} 

export default function App() {
  return (
    <div className="App">
      <h1>Star Rating App</h1>
      <Star />
    </div>
  );
}

I also tried writing <Star /> component like -

const Star = () => {
  return (
    <FaStar />
  )
}

which is still giving the same error. Though if I move <Star /> component to a separate file and import it in App.js file it works.

I am interested to know the reason behind this. Let me the concept around it.

Edit - CodeSandbox - https://codesandbox.io/s/reverent-hawking-7br7g?file=/src/App.js

Upvotes: 2

Views: 3969

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53934

You need to import it from the correct namespace, in this case Font Awesome:

// Not 'react-icons'
import { FaStar } from "react-icons/fa";

Upvotes: 6

Related Questions