I have a function that returns JSX as shown below:
function struct(locals) {
return (
<View style={fieldsetStyle}>
{label}
{error}
{rows}
</View>
);
}
label, error, and rows are functions that also return JSX.
I call this function within the render method of an ES6 class ponent
class Component extends React.Component {
render() {
const locals = this.getLocals();
return struct(locals);
}
}
When I run the code, I get error
Element type is invalid: expected a string (for built-in ponents) or a
class/function (for posite ponents) but got: object. Check the render
method of Struct
How can I get the result from struct function to render as return value of Component class render?
I have a function that returns JSX as shown below:
function struct(locals) {
return (
<View style={fieldsetStyle}>
{label}
{error}
{rows}
</View>
);
}
label, error, and rows are functions that also return JSX.
I call this function within the render method of an ES6 class ponent
class Component extends React.Component {
render() {
const locals = this.getLocals();
return struct(locals);
}
}
When I run the code, I get error
Element type is invalid: expected a string (for built-in ponents) or a
class/function (for posite ponents) but got: object. Check the render
method of Struct
How can I get the result from struct function to render as return value of Component class render?
Share Improve this question asked Nov 10, 2017 at 21:43 Tom AthensTom Athens 731 gold badge1 silver badge4 bronze badges 1-
2
Do you have a good reason for having this as a separate function? Why you don't turn it into a
LocalsViewponent and render it passinglocalsas prop? – Rafael Quintanilha Commented Nov 10, 2017 at 21:46
2 Answers
Reset to default 8You are returning a react ponent, not a react element. The difference is an element describes how to create the ponent, where as the ponent is the instanced class. You need to return React.createElement(Struct);, or return <Struct/>. Also, your locals variable will actually be a props object. So your code should look like this:
function struct({locals}) {
return (
<View style={fieldsetStyle}>
{label}
{error}
{rows}
</View>
);
}
class Component extends React.Component {
render() {
const locals = this.getLocals();
return <Struct locals={locals}/>;
}
}
First you have to import that function as an ES module into your class ponent.
import { struct } from '..path/to/struct';
Then your render function which should return some JSX which is syntactic sugar. You should place your intermediary variables before the return statement in your render method. It's safer to wrap it inside a div if you have multiple elements.
render() {
const locals = this.getLocals();
return (
<div>
struct(locals);
</div>
);
}