Estoy tratando de representar un objeto donde cada clave es diferente. Tengo que mostrar cada tecla como una casilla de verificación y, si está marcada, quiero mostrar los valores asociados, si los hay, en la matriz de valores.
La estructura de mi objeto es la siguiente:
myObj: { "key1": ["val1", "val2"], "key2": [], ... } Estoy revisando la lista de claves para representar las casillas de verificación y dentro, estoy usando el código a continuación para representar los valores. Tengo el valor de la clave actual accesible en una propiedad myKey.value . Pero si trato de usar formValues.myObj.myKey.value para acceder a los valores, se queja de que la propiedad myKey no existe en el tipo myObj .
{formValues.myObj.[`${currentKey}`].length > 0 && <CustomArrayHelper values={formValues.myObj.currentKey} arrayName="test" onRender={(avIndex: number) => ( <div className="my-container std-TextField"> <FormikTextField name={`test.${avIndex}`} label={`Test`} /> </div> )} />}Necesito alguna forma de especificar dinámicamente la clave actual para obtener los valores de cada clave. El código anterior devuelve un error.
También tengo la lista de posibles claves disponibles por separado:
export const MyKeys = [ { value: 'key1', label: 'key1' }, ... ]Para acceder a los valores utilizando claves de propiedad calculadas, debe utilizar la notación de corchetes.
<CustomArrayHelper values={formValues.myObj[currentKey]} /> Además, no debe poner un dot al acceder a las propiedades usando la notación de paréntesis, eso es un error de sintaxis. También puede eliminar la sintaxis de la plantilla de cadena, eso es innecesario.
formValues.myObj[currentKey].length