React.js How to loop and render component inside component?

Question

I'm trying to render components according to the data list. The data list include a list of address and records, in each address records, it contains one or multiple member records. The data structure looks like this:

combineData:[
addressData:{addressNo:... },
 memberDataList:[{...}]  
]

I want to render like this:

<address1>
<member1 of address 1>
<member2 of address 1>
<address2>
<member1 of address 2>
<member2 of address 2>
<member3 of address 2>
......

 
class AddressMembersTable extends React.Component {
    addressMembersViews = () => this.props.combineData.map((combineData, index) => {
        return (
            <Container layout="vbox">
                <AddressField
                    ref={'addressField'}
                    key={'addressField'}
                    addressData={combineData.addressData}
                />
  {combineData.memberDataList.forEach((memberData,index)=>{
               return(
                    <MemberField
                    ref={'memberField_' + index}
                   memberData = {combineData.memberDataList}
                   />
               )
        })}
        </Container>
        )

})}

I tried to loop the memberDataList for the MemberField components, but only AddressField is able to show. How can i render the components correctly?

Since you want to return an array of JSX elements for your members, use Array.map(). Array.forEach() does not return anything. — theRealEmu, Apr 29 '21 at 06:36

score 0 · Accepted Answer · answered Apr 29 '21 at 06:32

You will map it the say way you did this.props.combineData. Array.prototype.forEach is a void return. You need to return the array of JSX you mapped to.

{combineData.memberDataList.map((memberData, index) => (
  <MemberField
    key={index}
    ref={'memberField_' + index}
    memberData = {combineData.memberDataList}
  />
))}

score 0 · Answer 2 · answered Apr 29 '21 at 06:38

You are using the wrong list function.

map - transforms a list

forEach - performs side effects with each list item

const list = [1, 2, 3]
const double = n => n * 2

const a = list.map(double)
console.log(a) // [2, 4, 6]

const b = list.forEach(double)
console.log(b) // undefined

React.js How to loop and render component inside component?

2 Answers2