0
152
VisualizaçõesFiltrado de datos de API usando menú desplegable en React
¿Cómo haría para filtrar los resultados de una API usando el menú desplegable?
Actualmente tengo una etiqueta de selección así
<select value={selectMonthFilter} onChange={e=> setSelectMonthFilter(e.currentTarget.value)}> {console.log(selectMonthFilter)} <option value="">---</option> <option value="">Jan</option> <option value="">Feb</option> <option value="">Mar</option> ... </select>La lista también muestra todos los resultados de la API con
const [data, setData] = useState([]); const [selectMonthFilter, setSelectMonthFilter] = useState(data)Ejemplo de lo que devuelve la API
{ "id": 1, "first_name": "Bob", "last_name": "Smith", "birthdate": "1970-04-19T08:56:27Z", },Donde 1970 es el año, 04 es el mes, 19 es el día y la cadena posterior es la hora.
¿Cómo lo implementaría para que si el usuario selecciona Mar en el menú desplegable, filtre a todas las personas que cumplen años en marzo?
Intenté probar lo siguiente pero no parece seleccionar nada
const selectMonths = (selectMonthFilter) => { setSelectMonthFilter(selectMonthFilter) console.log(selectMonthFilter) }; <select value={selectMonthFilter} onChange={event => selectMonths(event.target.value)} >https://codesandbox.io/s/api-test-c4swl?file=/src/pages/home.jsx
1 Respostas
Responde à pergunta0
Proporcione valores de opción de mes que coincidan con la parte del mes de la cadena de fecha y hora de la fecha de nacimiento.
<label> Select Month <select value={selectMonthFilter} onChange={(e) => setSelectMonthFilter(e.currentTarget.value)} > <option value="">---</option> <option value="01">Jan</option> <option value="02">Feb</option> <option value="03">Mar</option> <option value="04">Apr</option> <option value="05">May</option> <option value="06">Jun</option> <option value="07">Jul</option> <option value="08">Aug</option> <option value="09">Sep</option> <option value="10">Oct</option> <option value="11">Nov</option> <option value="12">Dec</option> </select> </label>Puede dividir la fecha de nacimiento por "T" para obtener el prefijo de fecha, luego dividirlo por "-" y tomar la parte del mes.
const getMonthValue = (dateTime) => dateTime.toLowerCase().split("t")[0].split("-")[1];Una vez que tenga el valor del mes, puede filtrar sus datos por fechas de nacimiento que coincidan con el valor del mes seleccionado. Si no hay un mes para filtrar, devuelva verdadero para incluir todos los datos.
{data .filter(({ birthdate }) => selectMonthFilter ? getMonthValue(birthdate) === selectMonthFilter : true ) .map((el) => ( // map your JSX here ))}
Si tiene más filtros, puede combinarlos en la única devolución de llamada .filter .
Ejemplo:
{data .filter(({ birthdate, first_name, last_name, preferred_name }) => selectMonthFilter || searchNameFilter ? (selectMonthFilter && getMonthValue(birthdate) === selectMonthFilter) || (searchNameFilter && [first_name, last_name, preferred_name] .join(" ") .toLowerCase() .includes(searchNameFilter)) : true ) .map((el) => ( ... ))}Depende de usted decidir si se deben cumplir todas las condiciones (lógica Y todas las condiciones), o si alguna de ellas puede coincidir (lógica O todas las condiciones).