0

I have Test component and I want to use it in ShowTest as

import React from "react";

export default class Test extends React.Component{
    render() {
        return (
            <div>hi test</div>

        );

    }
}

I am rendering Test to ShowTest as follows

import {Test} from "./test";
import React from "react";
export default class ShowTest extends React.Component{
    render() {
        return (
            <div>
            <Test />
            </div>

        );

    }
}

Then I am using ShowTest into another component.
But I am getting this error

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

Not able to figure out why this is happening.

js_248
  • 2,032
  • 4
  • 27
  • 38

2 Answers2

1

It looks like the syntax for your import of your Test component is wrong.

Since you've exported Test as default, you don't need the curly braces around it when importing it in ShowTest. 

import {Test} from "./test";

should be 

import Test from "./test";
jaybee
  • 2,240
  • 14
  • 20
  • What is the meaning of curly braces?I always got confused when to use it or not. – js_248 Jan 13 '17 at 06:00
  • 1
    The curly braces are used for [destructuring assignment](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring). You're basically exporting an object. `default` gives the whole object a name, but named exports give each inner piece of a module a name and can be exported and imported directly instead of having to import the whole module. You can do both named exports _and_ a default export in the same file. – jaybee Jan 13 '17 at 06:07
0

Double checking but are the two components in two separate files?

If they are both in the same file, the syntax is off since there can only be one default when declaring export default class name extends React.Component.

If they are in two separate files, double check that they both have import React from "react" which could be the cause of the error. Another issue might that can be causing the error is the component has not been included and therefore does not know what is.

Gary
  • 61
  • 2
  • These two component are in different file with import React and ShowTest is rendering correctly.But Test is giving error – js_248 Jan 13 '17 at 05:36
  • As stated in the other answers, the annotation to import the test component should be `import Test from "./test"`. The curly brackets are not needed and causing the error for your example. – Gary Jan 13 '17 at 07:45