I'm a little unsure how to take the value showBtn and pass it into my <ListComponent />
Here's the code:
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} />
))}
My check for showBtn is working fine (returning true or false) but I can't access showBtn outside of the map function. Obviously the map is checking through various values so some will be true & others false, so keeping the map syntax is important. Any suggestions would be appreciated!
You can return an array of booleans, indicating on which index your condition is true/false:
const listOptions = list.actionCollection
.map((option) => ( //Implicit return
const showBtn = option.has(RENDER_BTN);
));
listOptions will look something like: [true, false, false, true...]
And you can use this in your jsx:
{list.actionCollection.map((option, index) => (
listOptions[index] && <ListComponent option={option} key={option.key} />
))}
Or, simply:
{list.actionCollection.map((option, index) => (
option.has('RENDER_BTN') && <ListComponent option={option} key={option.key} />
))}