How to insert a name in an array with number values-CodePudding

I'm trying to render out the lowest value of three values in an array. It looks like this

  const compareValues = [
    companyResult.physicalAverage,
    companyResult.stressAverage,
    companyResult.developmentAverage,
  ];
  const getLowestValue = (Math.min(...compareValues)); // returns 4.5 (which is correct)

  return ( 
  <div>
    <p>{getLowestValue}</p> // HERE I want to render out the name (string) instead of 4.5 
  </div>
);

However, I want to name each property, i.e

companyResult.physicalAverage = "Physical Activity" 
companyResult.stressAverage = "Stress",
companyResult.developmentAverage = "Personal Development"

I still want to return the lowest value with Math.min, but somehow return the 4.5 as a name. Anyone that has a clue on how?

CodePudding user response：

Get the min value yourself.

const compareValues = [
    {name: 'physicalAverage', value: companyResult.physicalAverage},
    {name: 'stressAverage', value: companyResult.stressAverage},
    {name: 'developmentAverage', value: companyResult.developmentAverage},
];

let minObj = compareValues[0]

compareValues.forEach(obj => {
    if(obj.value < minObj.value)
        minObj = obj;
})

return ( 
  <div>
    <p>{minObj.name}</p> 
  </div>
);

CodePudding user response：

You can use useMemo hooks to apply sort function. But you will have to tweak your compareValues array a bit to include details about title.

const {useMemo} = React;

const companyResult = {
  physicalAverage: 4.5,
  stressAverage: 5,
  developmentAverage: 6
};

function App() {
  const compareValues = useMemo(
    () => [
      { value: companyResult.physicalAverage, title: "Physical Activity" },
      { value: companyResult.stressAverage, title: "Stress" },
      { value: companyResult.developmentAverage, title: "Personal Development" }
    ],
    []
  );
  const lowest = useMemo(() => {
    return compareValues.sort((a, b) => a.value < b.value)[0];
  }, [compareValues]);

  return (
    <div>
      <p>Label: {lowest.title}</p>
      <p>Value: {lowest.value.toString()}</p>
    </div>
  );
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<div id="root"></div>

CodePudding user response：

If these are the only values in the object, you can make it even simpler by using

const compareValues = Object.entries(companyResult);
const minValue = compareValues.reduce((acc, entry) => entry[1] > acc[1] ? acc : value);
// minValue[0] is the key
// minValue[1] is the value

CodePudding user response：

You need to change your data structure. And then create a custom function (findMinValue) to find the minimum value in your data.

const values = [
  { name: "Physical Activity", value: companyResult.physicalAverage },
  { name: "Stress", value: companyResult.stressAverage },
  { name: "Personal Development", value: companyResult.developmentAverage },
];

const findMinValue = (array) =>
  array.reduce((prev, curr) => (prev.value < curr.value ? prev : curr));

const lowestValue = findMinValue(values);

return (
  <div>
    <p>{lowestValue.name}</p>
  </div>
);