Array is sorted, but React is not rendering in sorted order

Question

I have the following code..

{
     this.state.rows.map((qc) =>
         qc.BinsByDayByOrchardsQCs.map((qc2) =>
             qc2.BinsByDayByOrchardsQCsDefects.map((qc3) => 
                !defectsArray.includes(qc3.Defect) && defectsArray.sort() && defectsArray.push(qc3.Defect) &&
                  (<div className="row label">
                        <div className="column-label bold">{qc3.Defect}</div>
                    </div>)
           )
         )
      )
   }

When I use console.log("DefectsArray",defectsArray)

My array is printed and sorted in the console (my desired order)

0: "Bruise"
1: "Hail damage"
2: "Sunburn"
3: "Scuff"

However, react is actually rendering it "Sunburn, Bruise, Hail damage, Scuff" - basically unordered

How do I achieve the output that is printed in my console.log?

EDIT: Inside of the object..

`Array(20)
0:
BinsByDayByOrchardsAreas: null
BinsByDayByOrchardsCountries: null
BinsByDayByOrchardsPickers: null
BinsByDayByOrchardsQCs: Array(1)
0:
BinsByDayByOrchards: null
BinsByDayByOrchardsID: null
BinsByDayByOrchardsQCsDefects: Array(4)
0: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Sunburn", Count: 1, BinsByDayByOrchardsQCs: null}
1: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Bruise", Count: 2, BinsByDayByOrchardsQCs: null}
2: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Hail damage", Count: 0, BinsByDayByOrchardsQCs: null}
3: {BinsByDayByOrchardsQCsID: "-LbiHz7tuuJH71I_4IKw", Defect: "Scuff", Count: 2, BinsByDayByOrchardsQCs: null}

`

Possible duplicate of Sorting mapped properties from array JavaScript — Dom
– Dom, Commented Apr 28, 2019 at 22:57

0DDC0 · Accepted Answer · 2019-04-29 03:52:11Z

1

This is a simple working example for your reference as a code snippet!

function App(){
  return(
    [ "Hail damage", "Sunburn","Bruise","Scuff"].sort().map((s)=><div>{s}</div>)
  );
}

ReactDOM.render(
  <App />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

However your code is so flawed, it does't make sense at all. For starters you are sorting the defects array but you are showing(rendering) values that are in the qc3 array!

Move the function to generate strings for display into another function. I have fixed the rest of the implementation to be more readable!

getDisplayValues() {
    let displayedDefects = [];
    this.state.rows.map((qc) =>
        qc.BinsByDayByOrchardsQCs.map((qc2) =>
            qc2.BinsByDayByOrchardsQCsDefects.map((qc3) =>
                if(defectsArray.includes(qc3.Defect)){
                    displayedDefects.push(qc3.Defect);
                }
            )
        )
    );

    displayedDefects.sort();

    return displayedDefects.map((defect)=>( 
      <div className = "row label" >
          <div className = "column-label bold" > {defect} </div>
      </div> );

}

render(){
    return {this.getDisplayValues()}               
}

answered Apr 29, 2019 at 3:52

0DDC0

5,2791 gold badge30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

invrt Over a year ago

I have tried your code, fixed some syntax but displayedDefects is empty, but yes you are right, I was sorting the defectsArray but displaying qc3.Defects....that was my attempt at sorting the array and displaying it

Collectives™ on Stack Overflow

Array is sorted, but React is not rendering in sorted order

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related