How to properly deal with output order in React?

Question

React

Hello. Please tell me how to solve the following problem. The backend comes with an array of data with the type of widgets, for example:

{
  "widgets": [
    {
      "type": "One",
      "data": {
        "title": "title1",
        "subTitle": "subTitle1",
        "thirdText": "thirdText1"
      }
    },
    {
      "type": "Three",
      "data": {
        "title": "title3",
        "subTitle": "subTitle3",
        "thirdText": "thirdText3"
      }
    },
    {
      "type": "Two",
      "data": {
        "title": "title2",
        "subTitle": "subTitle2",
        "thirdText": "thirdText2"
      }
    }
  ]
}

My task is to display the widgets in the order they came from the backend. Those. in this case, the output will be:

<React.Fragment>
  <ComponentOne />
  <ComponentThree />
  <ComponentTwo />
</React.Fragment>

If the data did not come to One, then the output will be:

<React.Fragment>
  <ComponentThree />
  <ComponentTwo />
</React.Fragment>

Can you please tell me how to solve this problem correctly?

Answer 1

Just use widgets.map() - the array is already sorted and will be processed in order.