Cant add function to create dynamic button inside renderItem FlatList

Question

I am trying to add a function to return button text based on the state inside the renderItem FlatList component.

renderButton() {
  return <Text>Button</Text>;
}

<TouchableWithoutFeedback>
    <TouchableOpacity>
        {this.renderButton()}
    </TouchableOpacity>
<TouchableWithoutFeedback>

This code return an error

function this.renderButton is not a function

Update:

<FlatList
      data={list}
      renderItem={this.renderRow}
    />

renderRow({item}) {
  return(
      <TouchableWithoutFeedback>
        <TouchableOpacity>
            {this.renderButton()}
        </TouchableOpacity>
      <TouchableWithoutFeedback>
  );
}

renderButton() {
  return <Text>Button</Text>;
}

@Jayce444 not binding it anywhere else. only in this section of code. — Vimlan.G
– Vimlan.G, Commented Aug 22, 2017 at 6:08
You're not binding it anywhere in the code you've posted....are you binding it at all? — Jayce444
– Jayce444, Commented Aug 22, 2017 at 6:13

Shubham Khatri · Accepted Answer · 2017-08-22 06:12:38Z

2

You need to bind the renderRow function to be able to access this.renderButton in it.

<FlatList
      data={list}
      renderItem={this.renderRow.bind(this)}
    />

or

<FlatList
      data={list}
      renderItem={() => this.renderRow()}
    />

or

renderRow = ({item}) => {
  return(
      <TouchableWithoutFeedback>
        <TouchableOpacity>
            {this.renderButton()}
        </TouchableOpacity>
      <TouchableWithoutFeedback>
  );
}

answered Aug 22, 2017 at 6:12

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vimlan.G Over a year ago

Got it working. Thank you. Understood to use of bind now.

Collectives™ on Stack Overflow

Cant add function to create dynamic button inside renderItem FlatList

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related