He filtrado los procedimientos que me interesan y ahora quiero mostrar su costo promedio por paciente. Tengo el cálculo funcionando, pero no estoy seguro de cómo mostrarlo en la pantalla para que los usuarios lo vean. Esto es lo que tengo:
import React, { useState, useEffect, useMemo } from "react"; function Average ({posts, setUser, user}){ const [procedures, setProcedures] = useState ([]) const [filteredProcedure, setFilteredProcedure] = useState ("") const [averageCost, setAverageCost] = useState (0) const uniques = procedures.map(procedure => procedure.procedure) .filter((value, index, self) => self.indexOf(value) === index ) useEffect(() => { fetch(`/posts/${procedures}`) .then((r) => r.json()) .then(setProcedures); }, [posts]); function handleProcedureChange(procedure) { setFilteredProcedure(procedure); let filteredObject = procedures.filter (p=> p.procedure === procedure) console.log("lenght of filtered procedure:", filteredObject) let total = 0; for (let ii = 0; ii < filteredObject.length; ii++) { total = total + filteredObject[ii].patient_cost } console.log("total:", total) let avg = total / filteredObject.length console.log("average:", avg) } function handleChange(e) { handleProcedureChange(e.target.value); console.log(e.target.value) } return ( <div > <div > <label htmlFor="procedure">Procedure:</label> <select id="procedure" name="procedure" value={filteredProcedure} onChange={handleChange} > <option>Select Procedure</option> {uniques.map((procedure) => ( <option key={procedure} value={procedure}> {procedure} </option> ))} </select> </div> average: {averageCost} </div> ) } export default Average;¿Cómo puedo vincular "let avg = total / filteredObject.length" al estado "average: {averageCost}" al final? Soy nuevo en esto y no sé si hay una mejor manera de escribir este código. Agradezco la ayuda aquí.