Develop Reference

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

Actually, I am having an error in React while I am trying to import "New.js" components in "App.js"
Here is App.js code:
import React, {useState} from 'react';
import './App.css';
import New from './components/New/New';
function App() {
const [familiar, setFamiliar] = useState(false);
return (
<div className="App">
<h2>IsFamiliar: {familiar.toString()}</h2>
<button onClick={()=> setFamiliar(!familiar)}>Toggle</button>
<New></New>
</div>
);
}
export default App;
and here is the New.js components code:
import React from 'react';
const New = () => {
return (
<div>
<h1>I am a component</h1>
</div>
);
};
export default New;
And, I am getting this error:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

How to write a HOC in react which takes another hoc?

I am learning material UI by myself and came across this HOC pattern method withStyle HOC API, i tried implementing by myself with simple style(just string) to understand how this hoc(withStyle) function takes this hoc(named HigherOrderComponent)function works in code.
this is App.js and rendering<App/> this in index.js
import React from 'react';
import customWithStyle from './customWithStyle';
import Button from '#material-ui/core/Button';
function HigherOrderComponent(props) {
return <Button color={props}>Higher-order component</Button>;
}
const someStyle="primary";
export default customWithStyle(someStyle)(HigherOrderComponent);
And the code i tried writing is in customWithStyle.js file
import React from 'react'
const customWithStyle=(style)=>(Hoc)=>{
//console.log(style);
console.log(<Hoc/>)
return <Hoc props={style}/>
}
export default customWithStyle ;
i am getting error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
can some one help.

The only way that i use Hoc was with class. Something like this will help you
function HigherOrderComponent(props) {
return (<div style={{color: props.color}}>this is the main component</div>)
}
const customWithStyle = style => WrappedComponent => {
class HOC extends React.Component{
render = () => (<WrappedComponent color={style}></WrappedComponent>);
}
return HOC;
};
const StyledComponent = customWithStyle("red")(HigherOrderComponent);
ReactDOM.render(<StyledComponent />, document.querySelector("#app"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Use props.props within your HigherOrderComponent functional component for value of color attribute in Button Material component

Element type error in Query component only when using a HOC

I've created a withInfiniteScroll higher order component for adding infinite scrolling to a simple list of data. I'm attempting to use that HOC inside of apollo's Query component. This is where I get an element error:
Uncaught 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 Query.
I also see this error (not sure what that means...):
Uncaught (in promise) Error: ObservableQuery with this id doesn't
exist: 3
The code works fine when I'm not using the HOC
<Query>
{(data) => return <List list={data.list} /> }
</Query>
But it breaks when I add the HOC...
import withInfiniteScroll from './withInfiniteScroll';
const ListWithInfiniteScroll = withInfiniteScroll(List);
<Query>
{(data) => return <ListWithInfiniteScroll list={data.list} /> }
</Query>
I'm fairly sure that I'm not mixing up default/named imports. For reference, here is the HOC implementation (simplified):
const withInfiniteScroll = (Component) => {
class WithInfiniteScroll extends React.Component {
// Stuff here
render() {
return <Component {...this.props} />;
}
}
}
export default withInfiniteScroll;

In your example you do not seem to return the new class created in your higher order component function. Because of that, withInfiniteScroll(Component) will return undefined. Resulting in the Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Try this:
const withInfiniteScroll = (Component) => {
class WithInfiniteScroll extends React.Component {
// Stuff here
render() {
return <Component {...this.props} />;
}
}
// This line is important!
return WithInfiniteScroll;
}
export default withInfiniteScroll;
You could also remove the brackets around the fat arrow function to directly return the class, like so:
const withInfiniteScroll = Component => class extends React.Component { ... }

Try to pass data to the list and wrap into HOC after, something like
import withInfiniteScroll from './withInfiniteScroll';
const ListWithData = (props) => (
<Query>
{(data) => return <List list={data.list} /> }
</Query>
)
const ListWithInfiniteScroll = withInfiniteScroll(ListWithData);

React: Element type is invalid in one component but not the other

I'm fairly new to react, but I'm running into a problem that is throwing me for a loop.
Is there any reason that react would throw a Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. error when instantiating a component, but not when instantiating another component that literally has the exact same code?
Heres what I've got:
import React, { Component } from 'react';
import Method from "./Method";
class InterfaceContent extends Component {
renderInterface = (interfaceItem, index) => {
const itemKey = `interface-Item-${index}`;
const {Name, Interface, Method} = interfaceItem;
return (
<div key={itemKey}>
<p>{Name}</p>
<div className="interface-item-method">
{(interfaceItem.Method.length >= 1) ? <Method Method={interfaceItem.Method}/> : null}
</div>
</div>
);
}
render() {
return (
<div className="interfacecontent-component">
<h3 className="interfaces">Interfaces</h3>
{this.props.Interfaces.map(this.renderInterface)}
</div>
);
}
}
export default InterfaceContent;
Im getting some data back from an API that I'm going through and displaying on the page. A lot of the data has nested arrays, but anything that has Methods is all coming back in the same format.
And I get the error when trying to render out the <Method /> component, which looks like this
import React, { Component } from 'react';
class Method extends Component {
renderMethod = (method, index) => {
const itemKey = `method-item-${index}`;
const {DeprecatedSince, Description, Example, Name, Since, Argument, Return } = method;
return(
<div key={itemKey} className="method">
<h2>Name: {Name}</h2>
<h2>Description: {Description}</h2>
<h2>DeprecatedSince : {DeprecatedSince}</h2>
<h2>Example : {Example}</h2>
<h2>Since : {Since}</h2>
</div>
)
}
render() {
return (
<div className="method-component">
{this.props.Method.map(this.renderMethod)}
</div>
);
}
}
export default Method;
Whats confusing is the interfaceItem.Method data that I'm passing to the <Method /> component is the exact same structure-wise as I've used before in the app. So, just to test, I made an <InterfaceMethod /> component that, besides the name, is copy/pasted exact same code from the <Method /> file
import React, { Component } from 'react';
class InterfaceMethod extends Component {
renderMethod = (method, index) => {
const itemKey = `method-item-${index}`;
const {DeprecatedSince, Description, Example, Name, Since, Argument, Return } = method;
return(
<div key={itemKey} className="method">
<h2>Name: {Name}</h2>
<h2>Description: {Description}</h2>
<h2>DeprecatedSince : {DeprecatedSince}</h2>
<h2>Example : {Example}</h2>
<h2>Since : {Since}</h2>
</div>
)
}
render() {
return (
<div className="method-component">
{this.props.Method.map(this.renderMethod)}
</div>
);
}
}
export default InterfaceMethod;
Which renders just fine without errors.
Everything Ive googled concerning the Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. error seems to come up with the end being but got: undefined and ends up being an error with how something was imported.
That doesnt seem to be the case here. I am using the <Method/> component in a few other places throughout the app that I need to render similar content - would there be a reason that would interfere? I'd hate to have two components with the same code inside them floating around if I can avoid it.

may be the error is when you destructure your interfaceItem in your renderInterface method in InterfaceContent component.
renderInterface = (interfaceItem, index) => {
const itemKey = `interface-Item-${index}`;
const {Name, Interface, Method} = interfaceItem;
return (
<div key={itemKey}>
<p>{Name}</p>
<div className="interface-item-method">
{(interfaceItem.Method.length >= 1) ? <Method Method={interfaceItem.Method}/> : null}
</div>
</div>
);
}
What happening is when you render your Method component (using <Method />), it is not the actual component but the Method array that you destructured from interfaceItem. And that is why you are getting the array, as your are trying to render a object and not a react component.

Newbie to React => Element type is invalid: expected a string

I am going around in circles with the following when trying to load the basics of a React app into the browser.
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
The code is as follows (test.tsx)
/// <reference path="./typings/tsd.d.ts" />
import * as React from "react";
import * as ReactDOM from 'react-dom'
ReactDOM.render(
<TodoApp name="jim"/>, document.getElementById('root')
);
class TodoApp extends React.Component<any, any>{
constructor(props) {super(props); this.state = {};}
render() {
return (
<div>
<button>hit me</button>
</div>
)
}
}
export default TodoApp;
test.html
<html>
<body>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
the tsx is complied and bundled with Browserify and the error is occuring in the bundle.js
specifically # instantiateReactComponent(node) & the invariant function
Many thanks in advance !!

You're calling render and passing in a component before you have defined it.
// won't work!
var person = new Person() <-- undefined
class Person {}
// will work
class Person {}
var person = new Person()
Classes do not get 'hoisted' like functions do.