0

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:

  1. Solo filtra si escribo en mayuscula dentro del input, como podria hacer qpara que acepte tanto mayuscula como minuscula

  2. 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>

1 respuesta 1

0

Tienes dos opciones de hacerlo, básicamente tener un tu lista en otro componente y le puedes enviar el arreglo como un prop, de esta manera en este nuevo componente puedes tener una variable state que reciba los props y cada vez que filtres seteas los valores de tu props filtrados a este state así no pierdes los valores, este podría ser un ejemplo de lo que buscas y lo que sugiero:

import React from "react";

const arreglo = [
  "valor 1",
  "valor 2",
  "valor 3",
  "valor 4",
  "valor 5",
  "valor 6",
  "valor 7",
  "valor 8",
];

const renderLista = (param = []) => {
  return (
    <>
      {param.map((x) => {
        return <li key={x}>{x}</li>;
      })}
    </>
  );
};

export default function Test() {
  const [filtro, setFiltro] = React.useState("");
  const [elementos, setElementos] = React.useState(arreglo);

  const filtrado = (e) => {
    //setear el valor del filtrado
    const valor = e.target.value;
    setFiltro(valor);
  };

  //Cada vez que cambia el valor de filtro se ejecuta esta sentencia
  React.useEffect(() => {
    //si el filtro es undefined o está vacío reinicia el state
    if (!filtro || filtro == "") {
      setElementos(arreglo);
    } else {
      /*
        si tiene valor, entonces filtra el arreglo original
        con el valor de filtro.
      */
      setElementos(arreglo.filter((x) => x.includes(filtro)));
    }
  }, [filtro]);

  return (
    <>
      <label htmlFor="txtFiltro">filtro</label>
      <input
        id="txtFiltro"
        type="text"
        value={filtro}
        onChange={(e) => filtrado(e)}
      />
      <ul>{renderLista(elementos)}</ul>
    </>
  );
}

Ya en el caso que tienes pues tendrías que crear una copia de tu arreglo principal en otra variable estado, y en tu handleChangeSearch debes setear a la copia el filtro como lo hago en el useEffect.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.