React Native Action Button - Unable to Add buttons Dynamically

Unable to Add ActionButton Items dynamically.

I have the following setup --

<ActionButton>
    <ActionButton.item name={constant_btn1} />
    <ActionButton.item name={constant_btn2} />
</ActionButton>

I want to add dynamic buttons to this list. (The list is received from backend)

I have created a function that returns me views of these buttons.

getDynamicBtns() {
    return dynamicButtonsList.map(item, key) => {(
        return <ActionButton.item name={item.btnName} />;
    )};
}

and I have used it in this way -->

<ActionButton>
    <ActionButton.item name={constant_btn1} />
    <ActionButton.item name={constant_btn2} />
    {this.getDynamicBtns()}
</ActionButton>

So this is rendering my constant buttons, but not the dynamic buttons.

EDIT - I am returning the map from the getDynamicBtns() function and calling invoking the function call too from within render(). This is just some simplified sample code that I have wriiten.

EDIT2 - To prevent any confusion, changing original question's code.

2 answers

  • answered 2020-06-01 12:08 Ariel Perez

    You are no returning anything in getDynamicBtns function. You should return the result of your map:

    getDynamicBtns() {
        return dynamicButtonsList.map(item => <ActionButton.item name={item.btnName} />)
    }
    

  • answered 2020-06-01 13:44 Karan Asthana

    I figured it out. The problem was that the .map function returns an array of Objects.

    So the final element that was going to be rendered was a React element ActionButton.

    The ActionButton had only 3 children, irrespective of the size of my dynamic list.

    ActionButton.children: [
        staticButton1,
        staticButton2,
        [dynamicButton1, dynamicButton2, dynamicButton3, ....]
    ];
    

    As a solution, I took them into separate lists and found a union of the lists. And then rendered the list inside <ActionButton>

    Something like this ->

    let listA = [<ActionButton.Item name='staticBtn1.name' />];
    
    let listB = this.getDynamicBtns();
    
    let finalList = _.union(listA, listB);
    

    And then rendered it as -->

    <ActionButton>
        {finalList}
    </ActionButton>