Unable to Iterate and create ActionButton.Items

[sumit1317]

Trying to perform the following , but no success

  <ActionButton buttonColor="red" verticalOrientation="down" position="right" offsetX={10} offsetY={5} hideShadow={true}>
        <ActionButton.Item buttonColor='#9b59b6' title="All Offers" onPress={() => this.filterAdverts(0,"All Offers")}>
        <Icon name="md-create" style={styles.actionButtonIcon} />
        </ActionButton.Item>
        {
           allUserInterests.map((AUL, x) => {
             <ActionButton.Item
                key={x}
                buttonColor='#9b59b6' title={<Text>{AUL.interestName}</Text>}
                onPress={() => this.filterAdverts(AUL.interestID,AUL.interestName)}>
                <Icon name="md-create" style={styles.actionButtonIcon} />
            </ActionButton.Item>
          })
        }
        </ActionButton>

[mastermoo]

What is the error you are getting?

[mauricioaraldi]

Having the same problem. No error pops up for me, but no items are rendered.

[DimitrisTzimikas]

Any solution to the problem?? EDIT: You can Iterate Action Button Items to populate them dynamically with array.map.

<ActionButton  
     /*your settings*/
>
    {array.map(x => {
        return (
           <ActionButton.Item
              key={x}       <--- USE KEY
              /*your settings*/
            >
              /*your component*/
           </ActionButton.Item>
          );
       }
    )}
</ActionButton>

[mauricioaraldi]

@DimitrisTzimikas I've tried your way, and it just doesn't work. Have you done any other thing to resolve your problem?

[DimitrisTzimikas]

@mauricioaraldi Can you share the code or some part of it? In my case I have an array of objects and I map them. Note that you should not put <ActionButton.Item> over "{array.map(x => { ...". Inside <ActionButton> here </ActionButton> place only the {array.map(x => {....}

[mauricioaraldi]

I see. The problem is that I had the array.map AND an item. Like:

<ActionButton>
  array.map(
    //...
  )

  <ActionButton.Item>
    //...
  </ActionButton.Item>
</ActionButton>

If I left only the array.map, it works. Thanks for showing me this @DimitrisTzimikas

[mazenchami]

if you do all your logic prior to the return in render it works;

render = () => {
  let actionButtons = [];
  actionButtons.push(<ActionButton.Item key={'a'}>{...}</ActionButton.Item>);
  array.map(x =>
    actionButtons.push(<ActionButton.Item key={x.id}>{...}</ActionButton.Item>);
  )
  actionButtons.push(<ActionButton.Item key={'z'}>{...}</ActionButton.Item>);
  return (
      ...
      <ActionButton>
        {actionButtons}
      </ActionButton>
      ...
  );
}