CODEWITHSUNDEEP
react-nativerenderfloating-action-buttonaction-button
Karan Asthana
Karan Asthana

Reputation: 326

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.

Upvotes: 1

Views: 356

Answers (2)

Ariel Perez
Ariel Perez

Reputation: 519

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

Upvotes: 0

Karan Asthana
Karan Asthana

Reputation: 326

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>

Upvotes: 1

Related Questions