Sammy Sung Sammy Sung - 1 year ago 100
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 />
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 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