How to add function to dynamically created list view Buttons in react native?

Question

how to add function to dynamically created list view Buttons in react native?

I get the error "undefined is not a function (evaluating '_this4.fun()')"

 import React, { Component } from 'react';
    import {
      StyleSheet,
      Text,
      ListView,
      View,
      Alert,
      ToolbarAndroid,
      TouchableOpacity
    } from 'react-native';

    var _navigator;

    export default class Quotes extends Component {
      constructor(props) {
        super(props);
        this.state = {
          dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          }),
          loaded: false,
        };
      } 
     fun(){
      this.setState({
      loaded: true
      });
          }
      getMoviesFromApiAsync() {
        return fetch('https://facebook.github.io/react-native/movies.json')
          .then((response) => response.json())
          .then((responseJson) => {
            console.log(responseJson);
            this.setState({dataSource:this.state.dataSource.cloneWithRows(responseJson.movies),
            });
            return responseJson.movies;
          })
          .catch((error) => {
            console.error(error);
          });
      }


     render () {
      _navigator = this.props.navigator;
      return (
       <View style={styles.parentContainer}>

           <View style={styles.container}>
            <TouchableOpacity
                  style={styles.button}
                  onPress={()=>this.getMoviesFromApiAsync()}>
                  <Text style={styles.buttonText}>testing network</Text>
           </TouchableOpacity>
           </View>

           <Text style={styles.bigblue}>Dynamiclly created buttons below</Text>
            <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            style={styles.listView}/>
            </View>
      )
     }

I need the function fun() to be called when clicked, after dynamically created buttons in list view are created I noticed that fun() does not call only when I create dynamically created buttons and if I create a static button I can call it normally.

      renderMovie(moviess) {
        return (
          <View style={styles.container}>

            <View>
             <TouchableOpacity
                  style={styles.button}
                   onPress={()=>this.fun()}> 
                      <Text style={styles.buttonText}>{moviess.releaseYear}</Text>
                </TouchableOpacity>
              <Text>{moviess.releaseYear}</Text>
            </View>
          </View>
        );
      }
    }


    var styles = StyleSheet.create({
     parentContainer: {
      flex: 1,
     },
     container: {

        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
        flexDirection: 'row',

      },
        bigblue: {
        color: 'grey',
        fontWeight: 'bold',
        fontSize: 20,
      },
      toolbar: {
       height: 56,
        backgroundColor: '#4883da',
      },
      buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
      },
      button: {
        height: 70,
        width: 70,
        backgroundColor: '#FFC0CB',
        alignSelf: 'center',
        marginRight: 10,
        marginLeft: 10,
        marginTop: 10,
        marginBottom: 15,
        borderRadius: 50,
        borderWidth: 0.7,
        borderColor: '#d6d7da',
        justifyContent: 'center'
      }
    });

I get the error ** undefined is not a function (evaluating '_this4.fun()')**

Answer 1

Somehow you are loosing this inside of renderMovie(moviess) as it is bound to the global scope and not the class Quotes anymore.

if you add renderRow={this.renderMovie.bind(this)} it should work. (instead of renderRow={this.renderMovie} )

you could also add in the constructor : this.renderMovie = this.renderMovie.bind(this);