Rendering multiple buttons with different onPress React Native

Question

I'm trying to render 3 buttons with different text and action onPress(). I've found this solution on stackoverflow but it didn't work for me.

class App extends React.Component {
  state = {
    loading: false,
    isModalVisible: false
  };

  toggleModal = () => {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  };

  testfunc = () => {
    console.log("this f***ng WORKS");
  };

  renderButtons = () => {
    const buttons = [
      {
        title: "I have no clear direction",
        action: () => console.log("this WORKS")
      },
      { title: "I have some idea of what i want", action: () => this.testfunc },
      { title: "I know exactly what i want", action: this.toggleModal }
    ];

    buttons[0].action();
    buttons[1].action;
    buttons[2].action;

    return buttons.map((i, index) => {
      return (
        <View style={{ marginTop: 20, width: "100%" }} key={index}>
          <OnboardingButton
            title={i.title}
            loading={this.state.loading}
            onPress={() => i.action}
          />
        </View>
      );
    });
  };
}

I used console.log() just for testing. As output when this screen is rendered I'm getting this:

this WORKS

When I click on any button nothing happens.

@Tholle It actually worked and I tried it before. The problem was that onPress() was overridden in <OnboardingButton>. Thanks for the answer anyway! — Vadym Harkusha
– Vadym Harkusha, Commented Nov 26, 2018 at 18:52

Tholle · Accepted Answer · 2018-11-16 22:35:13Z

By writing onPress={() => i.action} you are creating a new inlined function that returns the action function of that button. The action for your second button is also creating a new function that returns the this.testfunc function.

Just give a reference to the function instead and it will work as expected.

class App extends React.Component {
  state = {
    loading: false,
    isModalVisible: false
  };

  toggleModal = () => {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  };

  testfunc = () => {
    console.log("this f***ng WORKS");
  };

  renderButtons = () => {
    const buttons = [
      {
        title: "I have no clear direction",
        action: () => console.log("this WORKS")
      },
      { title: "I have some idea of what i want", action: this.testfunc },
      { title: "I know exactly what i want", action: this.toggleModal }
    ];

    return buttons.map((i, index) => {
      return (
        <View style={{ marginTop: 20, width: "100%" }} key={index}>
          <OnboardingButton
            title={i.title}
            loading={this.state.loading}
            onPress={i.action}
          />
        </View>
      );
    });
  };

  render() {
    // ...
  }
}

Collectives™ on Stack Overflow

Rendering multiple buttons with different onPress React Native

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related