React component function returning JSX causes error when used in render method of ES6 class React component

user_8921875 0
Viewed 21146

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 component 

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 components) or a class/function (for composite components) 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?

jsx reactjs render javascript
2 Answers

You are returning a react component, not a react element. The difference is an element describes how to create the component, where as the component 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}/>; 
  }
}
user_7012630

First you have to import that function as an ES module into your class component.

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>
    );
  }
user_41085900
Related