Return back array from another component React

Question

So I currently have a Parent component, and a child component. The parent component consists of the following:

 import React, { Component } from 'react'
 import ActivityGenericFields from './activityGenericFields'


        class ActivityTypeSelector extends Component {

          render () {
          let activityFields = <ActivityGenericFields />
          console.log(activityFields)
            return (
              <div>
              </div>
            )
          }
        }
        export default ActivityTypeSelector

and a child component called ActivityGenericFields

import React, { Component } from 'react'
import propTypes from 'prop-types'

export default () => {

    let fields = [
    {
        active: true,
        dataType: 'Boolean',
        key: 'order',
        field: 'order',
        label: 'Private',
        order: 11,
        readOnly: false,
        mandatory: false,
      },
    ]
  return {fields}
}

Issue I am having is I have a console.log(activityFields) in my parent component which should return the array fields in the child component in ActivityGenericFields, however, it doesnt. It returns back an object with a series of other objects within it (key/props/ref/type/_owner/_store etc).

How do I strictly return back the fields?

Answer 1

Change let activityFields = <ActivityGenericFields /> to let activityFields = ActivityGenericFields();. This will return your array.