Estoy tratando de representar el valor más bajo de tres valores en una matriz. Se parece a esto
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> );Sin embargo, quiero nombrar cada propiedad, es decir
companyResult.physicalAverage = "Physical Activity" companyResult.stressAverage = "Stress", companyResult.developmentAverage = "Personal Development"Todavía quiero devolver el valor más bajo con Math.min, pero de alguna manera devuelve el 4.5 como nombre. ¿Alguien que tenga idea de cómo?
Obtenga el valor mínimo usted mismo.
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> );Puede usar ganchos useMemo para aplicar la función de clasificación. Pero tendrá que modificar un poco su matriz compareValues para incluir detalles sobre el título.
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>Necesitas cambiar tu estructura de datos. Y luego cree una función personalizada ( findMinValue ) para encontrar el valor mínimo en sus datos.
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> );