Tengo una variable de estado que parece bastante compleja... así:
[ { objName: nameOne, objData: [ { colName: [ colData ] }, { colName: [ colData] } ] }, ... ] Para el primer cuadro desplegable, los datos que se muestran son todos los objName . Y eso funciona bien. Pero el segundo debería mostrar todos los colName en función del objName que se seleccionó. Mi problema es que el tamaño de esto es dinámico.
Básicamente, solo quiero tomar lo que se seleccionó y consultar la variable de estado como un diccionario y mostrar todos los nombres de las columnas. es posible?
Ya tengo el código creado para <select> s. Pero simplemente no sé cómo manejar esto. ¿Algunas ideas?
El truco consiste en guardar la selección actual (en el primer menú desplegable) en el estado del componente. Creo que esta respuesta es útil aquí: https://stackoverflow.com/a/28868135/1326264
Luego puede usar esta selección guardada para completar el segundo menú desplegable.
Deberá filtrar según el valor del primer menú desplegable seleccionado. Entonces, el objeto de su segundo menú desplegable debe tener un valor que coincida con algo del valor del primer menú desplegable. Por ejemplo, le permite tener una lista de países y una lista de ciudades.
const country = ['USA','UK', 'India'] const cities = [{name:'Los Angeles', country:'USA'},{name:'California', country:'USA'},{name:'London', country:'UK'}, {name:'Delhi', country:'India'}] Luego, puede actualizar la variable de estado de su cities cada vez que cambie la variable de estado del country poniendo un useEffect
useEffect(() => { setCities(cities.filter(city => city.country === country)) },[country])