Estoy intentando crear una barra buscadora que me permita buscar los elementos de una lista que consumo de mi api, se aplica el filtro, pero tengo estos problemas:
Solo filtra si escribo en mayuscula dentro del input, como podria hacer qpara que acepte tanto mayuscula como minuscula
Cuando el input esta vacio, no se muestra la lista completa sino que se queda el elemento filtrado.
3.No puedo filtar cuando se trata de numeros, me arroja este error ==>>> Uncaught TypeError: el.includes is not a function
Este es son las funciones:
import React, { useState } from "react";
const Container = () => {
const [dataCheck, setDataCheck] = useState([]);
const [select, setSelect] = useState([]);
const [search, setSearch] = useState("");
const handleSelect = (e) => {
const valueCheckbox = e.target.value;
if (select.includes(valueCheckbox)) {
setSelect(select.filter((sel) => sel !== valueCheckbox));
} else {
setSelect([...select, valueCheckbox]);
}
};
const handleChangeSearch = (e) => {
setSearch(e.target.value);
var resSearch = dataCheck.filter((el) => {
if (el.includes(e.target.value)) {
return el;
}
});
setDataCheck(resSearch);
};
y este es mi input y la lista que pinto:
<form action="">
<input
type="search"
value={search}
onChange={handleChangeSearch}
/>
<br />
<label htmlFor="">Seleccionar Todo</label>
<input name="selectAll" type="checkbox" />
{dataCheck.map((el, i) => {
return (
<div key={i}>
<input
name={el}
type="checkbox"
value={el}
onChange={handleSelect}
/>
<label htmlFor="">{el}</label>
</div>
);
})}
</form>