How can I map and return first and last element in react?-CodePudding

I am having problem with login return first element and last element:

Here is my array of object:

0:
pointAmountMax: 99999
pointAmountMin: 1075
rateCode: ['INAINOW']
roomPoolCode: "ZZAO"
[[Prototype]]: Object
1:
pointAmountMax: 99999
pointAmountMin: 850
rateCode: ['INAINOJ']
roomPoolCode: "TOGA"
[[Prototype]]: Object
length: 2

How can I map through the array and return the pointAmountMin smaller number first?

So in this case I want to achieve something like this in my front end

return <p>850 - 1075</p>

CodePudding user response：

To get the required output first you will need to sort the array of object in ascending order related to the property pointAmountMin.

let arrayOfObj = [
    {
        pointAmountMax: 99999,
        pointAmountMin: 1075,
        rateCode: ['INAINOW'],
        roomPoolCode: "ZZAO",
    },
    {
        pointAmountMax: 99999,
        pointAmountMin: 850,
        rateCode: ['INAINOJ'],
        roomPoolCode: "TOGA",
    }
];

arrayOfObj.sort((a, b) => {
    return a.pointAmountMin - b.pointAmountMin
})
console.log(arrayOfObj)

Then collect only pointAmountMin values in an array.

const filteredResult = arrayOfObj.map(() => {
  return pointAmountMin
})

You have list of all pointAmountMin property values in ascending order (minimum first) Now you can show it on UI in your required format

<p>filteredResult.join(' - ')</p>

CodePudding user response：

Use sort() and then return the desired HTML

function App(){
  const myArray = [
    {
        pointAmountMax: 99999,
        pointAmountMin: 1075,
        somethingElse: null,
    },
    {
        pointAmountMax: 99999,
        pointAmountMin: 650,
        somethingElse: null,
    },
    {
        pointAmountMax: 99999,
        pointAmountMin: 975,
        somethingElse: null,
    }
  ]
  const getRange = (data) => {
    let sorted = data.sort((a,b) => {a.pointAmountMin - b.pointAmountMin})
    return [
      <p key={Math.random()}>
        {sorted[0].pointAmountMin} - {sorted.pop().pointAmountMin}
      </p>
    ]
  }
  return <span>{getRange(myArray)}</span>;
}
ReactDOM.render(<App/>, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"/>