I want to show each field which belongs to the parent section.
A field can have 0 - many sections.
Example field
{
collectionId: '7fn3fjl77wmfqph',
collectionName: 'fields',
id: 'x0pq5i1m7o9zwqz',
name: 'City',
order: 5,
required: true,
sections: [ 'p08wlrfyksgawmu' ],
slug: 'city',
type: 'input',
}
Example section
{
applications: [ '2o3i2cxkgidi4gr', 'y2ctsk5ru12pcmc', 'g2b7dsnl7a2igbr' ],
collectionId: '0hm8jcor8o0vnc3',
collectionName: 'sections',
description: '',
id: 'p08wlrfyksgawmu',
name: 'Contact details',
order: 1,
slug: 'contact-details',
}
This works ✅ (doesn't loop over field sections array and check if it matches section id):
{
sections.map((section) => (
<FormSection
name={section.name}
slug={section.slug}
description={section.description}
>
{fields.map((field) => (
<p class="text-gray-700">{field.name}</p>
))}
</FormSection>
))
}
This doesn't work ❌ (loops over field section array and checks if it matches section id):
{
sections.map((section) => (
<FormSection
name={section.name}
slug={section.slug}
description={section.description}
>
{fields.map((field) => {
field.sections.map((fieldsection) => {
fieldsection === section.id && (
<p class="text-gray-700">{field.name}</p>
)
})
})}
</FormSection>
))
}
Where am I going wrong?
Thank you! 