Passing value from a map function to a React component

Question

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!

option.showBtn = showBtn; is all you need. Of course you can also skip all that and use {list.actionCollection.map((option) =>(<ListComponent someProp={option.has(RENDER_BTN)} ))} — user5734311
– user5734311, Commented Sep 24, 2021 at 11:29

Sinan Yaman · Accepted Answer · 2021-09-24 11:44:29Z

1

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} />
))}

edited Sep 24, 2021 at 11:44

answered Sep 24, 2021 at 11:40

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cts Over a year ago

I think I get the idea, but then I'm just passing in booleans & not a showBtn value to my ListComponent that can be consumed in that component?

Sinan Yaman Over a year ago

Notice I don't loop through listOptions but I use them as a condition.

Collectives™ on Stack Overflow

Passing value from a map function to a React component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related