Sammy Sung Sammy Sung - 9 months ago 74
React JSX Question

Return back array from another component React

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 />
return (
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download