Adding a button in a FlatList in React Native

Question

I have a FlatList and I am trying to but a button below the items and when you click on the button it should display the name of the item in an alert.

class TopMovies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        apiTopLoaded: false,
        topPopularMovies: [],
    }
    this.conditionalTopPopular = this.conditionalTopPopular.bind(this);
    this.mybuttonclick = this.mybuttonclick.bind(this);
}

componentDidMount() {
fetch('someurls')
    .then((response)=>{
        response.json()
            .then((popularMovies) => {
                this.setState({
                    apiTopLoaded: true,
                    topPopularMovies: popularMovies.results,
                })
            })
    })    


mybuttonclick() {
    Alert.alert(item.original_title)
}

conditionalTopPopular() {
    if(this.state.apiTopLoaded===true) {
        return(
                <FlatList
                    horizontal={true}
                    data={this.state.topPopularMovies}
                    renderItem={({ item }) => (
                    <View>

                        <Text>{item.original_title}</Text>
                        <Button onPress={this.mybuttonclick} title="hello"/>
                    </View>
                    )}
                    keyExtractor={item => item.id}
                />
            </View>
        )

    }
}

I can see all the movie names in the list and I see buttons below the movie names, but when I click on it, it says "cant find variable item". The function mybuttonclick should alert the item.original_title prop because it displays correctly in the flatlist. Please help.

Ivalo Pajumets · Accepted Answer · 2018-01-14 18:18:45Z

3

Change your function like this:

mybuttonclick(movieTitle) {
    Alert.alert(movieTitle)
}

And pass in the the movie title like this:

<Button onPress={this.mybuttonclick(item.original_title)} title="hello"/>

answered Jan 14, 2018 at 18:18

Ivalo Pajumets

4496 silver badges12 bronze badges

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

4 Comments

craftdeer Over a year ago

Thank you. it is showing the alerts. But the alerts run as soon as the program runs.

Ivalo Pajumets Over a year ago

@craftdeer change onPress to onPress={() => this.mybuttonclick(item.original_title)}

craftdeer Over a year ago

Awesome. Could you explain the arrow function in your last comment?

Ivalo Pajumets Over a year ago

@craftdeer this article explains it very thoroughly.

FaISalBLiNK · Accepted Answer · 2018-10-11 09:38:14Z

0

You should use the fat arrow function in the onPress like this.

<Button onPress={() => this.mybuttonclick(item.original_title)} title="hello"/>

answered Oct 11, 2018 at 9:38

FaISalBLiNK

7212 gold badges12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Adding a button in a FlatList in React Native

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related