Esencialmente, tengo un menú desplegable de selección que está siendo completado por una API.
Si observa el siguiente fragmento de código, esencialmente creé una matriz de ID llamada "primera" y la convertí en el valor de la primera opción de selección sobre el mapa que hice para completar el resto de la selección.
Ahora, en mi handleChange cuando registro el valor de una opción seleccionada, devuelve el valor de la opción dada en una matriz de números de cadena.
--> Ejemplo... si el usuario selecciona la segunda opción ['1']
Cuando el usuario selecciona 'Todos los ID', ahí es donde está el problema. Cuando se selecciona esa opción, lo que se registra es ---> ['1,2,6,8,15,16,17,20,22,23,24,25,26,27,30,32,33,34, 36']
Entiendo que podría usar el método de división, pero falla con cualquier otra opción seleccionada.
¿Cómo podría evitar eso?
const DropDown = ({ list = [], title, onChange }) => { const handleChange = (e) => { const { value } = e.target const arr = [value] console.log(arr) // onChange(Number(value)) } const first = list.map((list) => list.id) return ( <> <select onChange={handleChange}> <option value={first}>{title}</option> {list.map((item) => ( <option key={item.id} value={item.id}> {item.name} </option> ))} </select> </> ) }e.target.value es una cadena, por lo que deberá cambiar esto:
const arr = [value]a
const arr = value.split(",").map(Number);Puede usar lo que quiera como el valor (clave) de la opción "Todos". Por ejemplo, a continuación, he usado "all" como clave y lo manejé específicamente en el controlador handleChange .
const DropDown = ({ list = [], title, onChange }) => { const handleChange = (e) => { const { value } = e.target; if (value === "all") { onChange(list.map((l) => l.id)); } else { onChange([parseInt(value, 10)]); } }; return ( <> <select onChange={handleChange}> <option value="all">{title}</option> {list.map((item) => ( <option key={item.id} value={item.id}> {item.name} </option> ))} </select> </> ); }; También puede usar value.split(",") , que funcionaría para su ejemplo específico pero no sería suficiente si necesita manejar diferentes tipos de elementos en la lista (tal vez cadenas que podrían contener sus propios , s).