Найти самое низкое значение в массиве и добавить класс

Question

У меня есть компонент реагирования, который получает реквизит, который может иметь значение или быть неопределенным. Мне нужно найти самое низкое значение из массива (одно или несколько значений могут быть неопределенными) и добавить класс в элемент списка «столбец», который имеет самое низкое значение.

Допустим, объект приходит вот так:

[
 {
  "r1": [
    {
     price: 200
    }
  ],
  "r2": [
   {
    price: undefined
   }
  ],
  "r3": [
   {
    price: 1000
   }
  ]
 }
]

Вот мой компонент

class PriceList extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   r1Price: props.parsedOffers[`r1`],
   r2Price: props.parsedOffers[`r2`],
   r3Price: props.parsedOffers[`r3`]
  };
 }

 render() {
  return (
   <ul class="row">
    <li class="column r1">{this.state.r1Price.price ? this.state.r1Price.price : <span>-</span>}</li>
    <li class="column r2">{this.state.r2Price.price ? this.state.r2Price.price : <span>-</span>}</li>
    <li class="column r3">{this.state.r3Price.price ? this.state.r3Price.price : <span>-</span>}</li>
   </ul>
  );
 }
};

export default PriceList;

Я ожидаю, что в рендеринге HTML это должно быть показано так:

<ul class="row">
 <li class="column r1 lowest">200</li>
 <li class="column r2">-</li>
 <li class="column r3">1000</li>
</ul>

Answer 1

добавьте этот код между super(props) и this.state = { в вашем конструкторе

// Finds the lowest value in the array
let lowestValue = Infinity;
for (let value in props.parsedOffers.values) {
  if (value === undefined) { continue; }

  if (value < lowestValue) { lowestValue = value }
}

Затем вы можете добавить lowestValue к состоянию вашего объекта. После этого вы можете изменить свои li элементы, чтобы они выглядели так

<li className={"column r1" + (this.state.r1Price === this.state.lowestValue ? 'lowest' : ''}> ... </li>

Answer 2

Для структурирования вашего объекта вам потребуется код ниже, чтобы найти наименьшее значение.

let lowestNumberValue = Object.values(objData[0]).map(u=>u[0]['price']).sort((a,b)=>a>b)[0];

// above would give 200

Тогда при рендеринге вы можете использовать что-то вроде

<li className={"column r1" + ((lowestNumberValue == this.state.r1Price) && 'lowest')}> ... </li>

<li className={"column r2" + ((lowestNumberValue == this.state.r2Price) && 'lowest')}> ... </li>

Answer 3

У вас есть объект, а не массив. Если вы хотите получить имя свойства, значение которого является наименьшим, вы можете использовать Object.entries () , Array.prototype.map () и Array.prototype. sort () вот так:

const state = {
 r1Price: '200',
 r2Price: undefined,
 r3Price: '1000',
 r4Price: '100',
 r5Price: '120'
};

const lowest = Object.entries(state)
  .map(([k,v]) => [k, v ? +v : Infinity])
  .sort((a, b) => a[1] - b[1])[0];

console.log(lowest);

Затем для каждого li вы можете связать класс следующим образом:

render() {
  const lowest = Object.entries(this.state)
    .map(([k,v]) => [k, v ? +v : Infinity])
    .sort((a, b) => a[1] - b[1])[0][0];

  return (
    <ul class="row">
      <li className={'column r1 ' + lowest === 'r1Price'}>{...}</li>
      <li className={'column r2 ' + lowest === 'r2Price'}>{...}</li>
      <li className={'column r3 ' + lowest === 'r3Price'}>{...}</li>
    </ul>
  );
}

Answer 4

Вот мое редактирование, основанное на вашем редактировании. Это работает?

Вот код для кода: https://codesandbox.io/s/lx1x57o7mz

import ReactDOM from "react-dom";
import "./styles.css";
const data = {
  r1: [
    {
      price: 200
    }
  ],
  r2: [
    {
      price: undefined
    }
  ],
  r3: [
    {
      price: 1000
    }
  ]
};
class App extends React.Component {
  constructor(props) {
    super(props);

    let lowestPrice = Infinity;

    console.log("props.parsedOffers", props.parsedOffers);
    for (let record in props.parsedOffers) {
      const price = props.parsedOffers[record][0].price;
      if (price !== undefined && price < lowestPrice) {
        lowestPrice = price;
      }
    }

    this.state = {
      lowestPrice: lowestPrice,
      r1Price: props.parsedOffers[`r1`][0].price
        ? props.parsedOffers[`r1`][0].price
        : "---",
      r2Price: props.parsedOffers[`r2`][0].price
        ? props.parsedOffers[`r2`][0].price
        : "---",
      r3Price: props.parsedOffers[`r3`][0].price
        ? props.parsedOffers[`r3`][0].price
        : "---"
    };
  }

  render() {
    return (
      <ul className="row">
        <li
          class={`column r1 ${
            this.state.r1Price === this.state.lowestPrice ? "lowest" : ""
          }`}
        >
          {this.state.r1Price}
        </li>
        <li
          class={`column r2 ${
            this.state.r2Price === this.state.lowestPrice ? "lowest" : ""
          }`}
        >
          {this.state.r2Price}
        </li>
        <li
          class={`column r3 ${
            this.state.r3Price === this.state.lowestPrice ? "lowest" : ""
          }`}
        >
          {this.state.r3Price}
        </li>
      </ul>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App parsedOffers={data} />, rootElement);```