React Native Action Button - Unable to Add buttons Dynamically

Unable to Add ActionButton Items dynamically.

I have the following setup --

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

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, key) => {(
        return <ActionButton.item name={item.btnName} />;

and I have used it in this way -->

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

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 => <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: [
        [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='' />];
    let listB = this.getDynamicBtns();
    let finalList = _.union(listA, listB);

    And then rendered it as -->