Tengo una matriz que contiene todos los valores, digamos arr1 = [{"Name":"Mr.X"},{"Name":"Mr.Y"},{"Name":"Mr.Z"} ].

También tengo otra matriz con pocos valores como arr2 = [{"Name":"Mr.Z"}].

Quiero mostrar todos los datos de arr1 como una casilla de verificación de modo que si los datos existen en arr2, se mostrarán como una casilla marcada. En este caso, Mr.Z debería estar marcado de forma predeterminada y los otros dos deberían estar desmarcados.

He intentado esto, pero mis datos ahora se muestran varias veces debido a dos bucles.

{arr1.map((name1) =>
    arr2.map((name2) =>
    name1.Name === name2.Name ? (
        <FormControlLabel
             control={
                 <Checkbox
                     checked={true}
                     name="Name"
                     color="primary"
                     disabled={editable}
                 />
             }
             label={name.Name}
        />
        ) : (
            <FormControlLabel
                 control={
                     <Checkbox
                          name="Name"
                          color="primary"
                          disabled={editable}
                    />
                 }
                 label={name.Name}
            />
      )
))}

Por favor, hágame saber qué enfoque debo aplicar.

0
Ankit Jaishwal 13 mar. 2021 a las 23:42

1 respuesta

La mejor respuesta

Pruebe algo entre las líneas de:

arr1.map((arrItem) =>
        (
            (arr2.find(u => u.Name === arrItem.Name)) ?
            console.log(arrItem.Name + " checked")
            :
            console.log(arrItem.Name + " unchecked")
        ))

Cuando se le da su entrada, esto produce: salida

1
jfakour 14 mar. 2021 a las 11:01