No estoy seguro de cómo tomar el valor showBtn y pasarlo a mi < ListComponent />
Aquí está el código:
const listOptions = list.actionCollection .map((option) => { const showBtn = option.has(RENDER_BTN); // tried to assign showBtn to a value that could be passed to component below return option; }); {listOptions.map((option) => ( <ListComponent option={option} key={option.key} /> ))} Mi comprobación de showBtn funciona bien (devuelve verdadero o falso), pero no puedo acceder a showBtn fuera de la función de mapa. Obviamente, el mapa está comprobando varios valores, por lo que algunos serán verdaderos y otros falsos, por lo que es importante mantener la sintaxis del mapa. ¡Cualquier sugerencia sera apreciada!
Puede devolver una matriz de valores booleanos, indicando en qué índice su condición es true/false :
const listOptions = list.actionCollection .map((option) => ( //Implicit return const showBtn = option.has(RENDER_BTN); )); listOptions se parecerá a: [true, false, false, true...]
Y puedes usar esto en tu jsx:
{list.actionCollection.map((option, index) => ( listOptions[index] && <ListComponent option={option} key={option.key} /> ))}O simplemente:
{list.actionCollection.map((option, index) => ( option.has('RENDER_BTN') && <ListComponent option={option} key={option.key} /> ))}