How to add React component inside map function?

Question

I have web app that contains page with header. There are 3 buttons in header and I want to "attach" Confirm component to one of them, which means when I click that button Confirm component will be displayed. The code looks as following:

const renderButtons = (actions: Interfaces.DeclarationAction[]) =>
    actions.map((action, i) => {
        if (action.name === 4) {
            <Confirm
                name={modalName()}
                content="Are you sure?"
                onConfirm={checkingFinish}
            />
        }
        <ActionButton
            key={i}
            action={action}
            onClickAction={props.onClickAction}
            declaration={props.declaration}/>
    });

As you can see, the renderButtons renders those 3 buttons, but there is an error. Please, take a look at the screen shot below:

How to get rid of the error?

You seems to missed return statement

Sasha
– Sasha

2018-05-08 13:41:35 +00:00
Commented May 8, 2018 at 13:41 — Sasha
– Sasha, Commented May 8, 2018 at 13:41
Please post all the code

Yossi
– Yossi

2018-05-08 13:47:07 +00:00
Commented May 8, 2018 at 13:47 — Yossi
– Yossi, Commented May 8, 2018 at 13:47

TrivialCase · Accepted Answer · 2018-05-08 15:08:20Z

2

It looks like you might have just missed a return statement. Also I don't think you want the fourth Action button, but I'm not sure. You probably wanted something like this:

const renderButtons = (actions: Interfaces.DeclarationAction[]) =>
  actions.map((action, i) => {
    return(action.name === 4 ?
      <Confirm
        name={modalName()}
        content="Are you sure?"
        onConfirm={checkingFinish}
      /> :
      <ActionButton
        key={i}
        action={action}
        onClickAction={props.onClickAction}
        declaration={props.declaration}/>
    )
  }
);

or alternatively:

const renderButtons = (actions: Interfaces.DeclarationAction[]) =>
  actions.map((action, i) => (action.name === 4 ?
    <Confirm
      name={modalName()}
      content="Are you sure?"
      onConfirm={checkingFinish}
    /> :
    <ActionButton
      key={i}
      action={action}
      onClickAction={props.onClickAction}
      declaration={props.declaration}/>
  )
);

Note that in your code you have a block like

if (condition) {
  // do something
}
// do something else

A block like this will always do something else, but it will only do something if the condition is met. So if actions contains three things, and one of them has action.name === 4 then you would get four components, and one of them would be a Confirm component.

edited May 8, 2018 at 15:08

answered May 8, 2018 at 13:51

TrivialCase

1,0992 gold badges15 silver badges33 bronze badges

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

2 Comments

tesicg Over a year ago

There always needs to be 3 buttons in header, but under some conditions, one of those 3 buttons should have Confirm component ready to be displayed when we click it. Does your code fulfill that need?

TrivialCase Over a year ago

It seems likely. In the code from your question, you will get an ActionButton from each action, so if there are 3 actions then you get 3 ActionButtons. You would also get one Confirm component when the condition === 4 is met, for a total of 4 components. This is because your if had no else. In the code I provided, you would get only 3 components, and if action.name === 4 for one of the actions then one of them would be a Confirm component

Revansiddh · Accepted Answer · 2018-05-08 13:48:02Z

1

    const myComponent = actions.map((action, i) => {
        return <Component/>
    })

Use as {myComponent}

you just missed return

answered May 8, 2018 at 13:48

Revansiddh

3,0923 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

How to add React component inside map function?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related