0
filterOption={(input, option) => 
    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}

En un proyecto de React tengo un select donde usa una propiedad y es una expresión larga que no puedo llegar a entender cual es su funcionalidad

<Select
    showSearch
    className="select-news"
    placeholder="Select a Crypto"
    optionFilterProp="children"
    onChange={value => console.log(value)}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
></Select>
1
  • Aquí explican cosas sobre este tema: react-select.com/advanced. Supongo que en tu caso se espera un resultado booleano del filtro de true/false si se quiere en mayúsculas o en minúsculas.
    – masterguru
    el 20 feb. 2022 a las 21:44

1 respuesta 1

2

Empecemos por lo básico:

La estructura () => ... indica que se va a realizar una función de una sola línea.

(arg1, arg2, ... argn) indica que la función está recibiendo parámetros para operar.

Yéndonos a la instrucción, el operador >= es una comparación "mayor que" que solo puede devolver dos valores posibles: verdadero (true) o falso (false), porque "10 es mayor que 5", "2 es mayor que o igual a 2" pero "-1 no es mayor o igual a 0". Por lo tanto, sabemos que lo que va a devolver la función es un valor lógico (en inglés el término es boolean).

(input, option) => option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0

option es un parámetro que recibe (consulta la documentación del componente) la función, y asume que tendrá una propiedad children y que será texto.

La función toLowerCase() convierte un texto a minúsculas.

La función indexOf de un texto encuentra la posición de la primera aparición de un texto (definido en su parámetro) en otro texto. Por ejemplo:

"hola mundo".indexOf("mundo")

devolverá 5, porque es la posición desde el inicio del texto (en base 0) del texto buscado:

"hola mundo"
      ^
 012345

Pero si no encuentra el texto buscado, devolverá -1.

Por lo tanto, esta es la secuencia que sigue la función:

  1. Recibe dos parámetros, un texto por buscar (input) y un parámetro dónde buscar (option).
  2. El texto dónde buscar será la propiedad children del parámetro option.
  3. Convertirá a minúsculas tanto el texto a buscar (input) como el texto en el que va a buscar (option.children). ¿Por qué los convierte a minúsculas? Porque así no importará si el texto o la búsqueda tienen mayúsculas y/o minúsculas, haciendo que "Hola", "HOLA", "HolA", "holA", "hola", etc. sean iguales.
  4. Va a buscar la posición del texto buscado dentro del texto a buscar (indexOf).
  5. Comparará el resultado de la búsqueda a ver si es mayor que o igual a 0.
  6. Si el texto fue encontrado, la posición será por lo menos 0, y la comparación será verdadera.
  7. Si el texto NO fue encontrado, el resultado de indexOf será -1, y al comparar -1 >= 0 el resultado será falso.
  8. El resultado de esta función será entregado al componente en su propiedad filterOption.

Espero que esta explicación sea lo suficientemente clara.

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.