CODEWITHSUNDEEP
reactjs
Raven
Raven

Reputation: 689

React error "You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports"

https://codesandbox.io/s/sparkling-paper-mxb9g?file=/src/index.tsx

All my imports and exports are fine.

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 Search.

Search.tsx Render function

    render = () => {
        return (
            <div className="wrapper">
                <div className='content'>
                    <SearchBox placeholder="Search" underlined={true} onChange={this.setQuery} onSearch={this.searchQuery}/>
                    <this.RenderDomains />
                    <this.RenderImages />
                </div>
            </div>
        )
    }

How does this error relate to this block of code?

Upvotes: 3

Views: 4640

Answers (1)

kyle
kyle

Reputation: 2638

The reasoning you're getting the error is because of how you're trying to render the domains and images in the render method of your Search component.

User defined components must start with an uppercase letter. So calling <this.RenderDomains /> isn't allowed. You have a couple options for fixing this.

  1. Instead of trying to render the result of the method using jsx like <this.RenderDomains /> you should call the method and store the returned value in a variable and then render the variable or just directly return the results of the method. The example below shows both examples.
render = () => {
        const domains = this.RenderDomains();
        const images = this.RenderImages();
        return (
            <div className="wrapper">
                <div className='content'>
                    <SearchBox placeholder="Search" underlined={true} onChange={this.setQuery} onSearch={this.searchQuery}/>
                    {domains}
                    {this.renderImages()}
                </div>
            </div>
        )
    }
  1. Assign the method (not result) to a variable starting with an uppercase character and then call it like a normal component.
render = () => {
        const RenderDomains = this.RenderDomains;
        const RenderImages = this.RenderImages;
        return (
            <div className="wrapper">
                <div className='content'>
                    <SearchBox placeholder="Search" underlined={true} onChange={this.setQuery} onSearch={this.searchQuery}/>
                    {<RenderDomains />}
                    {<RenderImages />}
                </div>
            </div>
        )
    }
  1. Instead of using the class's method, make the RenderDomains and RenderImages their own components.

Upvotes: 2

Related Questions