React Native Action Button - Unable to Add buttons Dynamically

Question

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.

try to `console.log` the `dynamicButtonsList` array to check if it's not empty — zb22, Jun 01 '20 at 12:37
@zb22 Thanks a lot! After checking I got to know that the children of were a bit incorrect. I’ll post an answer to explain it better. — Karan Asthana, Jun 01 '20 at 13:32

score 1 · Answer 1 · answered Jun 01 '20 at 13:44

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>

score 0 · Answer 2 · edited Jun 02 '20 at 08:44

0

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

edited Jun 02 '20 at 08:44

zb22

3,126
3
19
34

answered Jun 01 '20 at 12:08

Ariel Perez

499
3
7

Sorry @Ariel Perez. I am doing that. Have not added it in the question. Will Update. But this does not solve the problem. – Karan Asthana Jun 01 '20 at 12:34

React Native Action Button - Unable to Add buttons Dynamically

2 Answers2