Iterate over all Array indexes within array with map method Javascript

Question

Been struggling with this for some time now and would appreciate any insight you guys have..

This is what my JSON Data looks like..

BinsByDayByOrchardsQCs [Array] > BinsByDayByOrchardsQCsDefects [Array]

I need to display each "Defect" on a grid table, which is inside the array of BinsByDayByOrchardsQCsDefects which will look something like this

What I have so far is {this.state.rows.map((qc) => <div className="row table">{qc.BinsByDayByOrchardsQCs[0].BinsByDayByOrchardsQCsDefects[0].Defect}</div>

This currently returns Hail Damage, Sunburn, Sunburn, Sunburn, my question to you guys is how do I return all the defects from the whole array not just [0]

Answer 1

I like using Lodash for collection manipulation.

But you could also use nested maps:

{
    this.state.rows.map((qc) =>
        qc.BinsByDayByOrchardsQCs.map((qc2) =>
            qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
                <div className="row table">
                    {qc3.Defect}
                </div>
            )
        )
    )
}