Tengo una página con una búsqueda, puede filtrar los resultados con un control deslizante de rango. Tengo un evento onChange en el control deslizante que debería establecer dinámicamente un parámetro .filter. Estoy pasando ese parámetro a un .sort().filter(props.filter).map() encadenado.

Cuando uso el control deslizante, está cambiando el parámetro por el que estoy pasando, pero .map() no está actualizando los resultados.

Cualquier ayuda muy apreciada:

 let genderSpecificFilter = 'All'; let rangeSpecificFilter = 'All' let sendFilteredDoctors = () => filterDoctors(genderSpecificFilter,rangeSpecificFilter); function changeRangeFilterParams() { rangeSpecificFilter = checkBoxDistanceMap[document.getElementById('range-miles').value]; sendFilteredDoctors = filterDoctors(genderSpecificFilter,rangeSpecificFilter); console.log(rangeSpecificFilter) }

 <PrintSearchResults doctors={doctors} filters={sendFilteredDoctors} />

 import PrintDoctor from "./printdoctor"; function PrintSearchResults(props) { return ( <div> {props.filters} <p className="text-xl text-gray-350"> Total Results: <span className="ml-3" id="total-results-num"> {props.doctors.results .sort((a, b) => a.locations[0].distance - b.locations[0].distance) .filter(props.filters).length} </span> </p> {props.doctors.results .sort((a, b) => a.locations[0].distance - b.locations[0].distance) .filter(props.filters) .map((doctor, key) => ( <PrintDoctor image={doctor.image} url={doctor.url} fullName={doctor.fullName} specialties={doctor.specialties} locations={doctor.locations} gender={doctor.gender} key={key} /> ))} </div> ); } export default PrintSearchResults

Editar: en el cambio que viene de aquí:

 <input onChange={changeRangeFilterParams} type="range" min="1" max="6" className="slider" defaultValue="6" id="range-miles" />