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?
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>
);
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>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>
);