CODEWITHSUNDEEP
javascriptreact-native
Arvindh
Arvindh

Reputation: 620

Dynamically change function onPress handler in react-native

Is there a way to dynamically change the onPress function handler in a <FlatList>? I have three onPress functions which I need passed via an array. How can I update the function or function name that is passed to <TouchableOpacity> dynamically (see my code below)?

My input array: 

const menu = [
{
  "id": 1,
  "route": "this.onBottonPressedHome.bind(this)",
  "info": "1"
},
{
    "id": 2,
    "route": "this.onBottonPressedSettings.bind(this)",
    "info":"2"
},
{
    "id": 3,
    "route": this.onBottonPressedHistory.bind(this)",
    "info": "3"
}

]

My FlatList: 

<FlatList
horizontal={true}
data={menu}
keyExtractor={item => item.id.toString()}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => (
    <TouchableOpacity
    onPress={item.route}
    >
        <Card>
            <CardItem style={{ backgroundColor: '#37BBE1'}}>
                <Body>
                    <View style={{ paddingTop: 10, width: 135 }}>
                        <Text style={{ fontSize: 12, textAlign:'justify', color: '#fff' }}>
                            {item.info}
                        </Text>
                    </View>
                </Body>
            </CardItem>
        </Card>
    </TouchableOpacity>

When I do this, I get a error stating that bind is not defined in the array. How can I solve this ?

Update:

I have achieved this using ternary operators, is it good ? Will this create any problems in performance issues ?

Upvotes: 2

Views: 1279

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30370

If I understand correctly, your menu array consists of object items that have string value fields (ie no "real" function bindings).

Assuming this is a constraint that you have to work around, you might consider a different approach to this problem, where instead of dynamically passing the onPress handler at render time, you instead dynamically resolve the handler during the event like so:

render() {

  /* This handler dynamically selects the action to call, based on the "item"
  that the user has pressed */
  const onPressItemHandler = (item) => {
    switch(item.id) {
      case 1: {
        this.onBottonPressedHome();
        break;
      }
      case 2: {
        this.onBottonPressedSettings();
        break;
      }
      case 3: {
        this.onBottonPressedHistory();
        break;
      }
    }
  }

  return <FlatList
  horizontal={true}
  data={menu}
  keyExtractor={item => item.id.toString()}
  showsHorizontalScrollIndicator={false}
  renderItem={({ item, index }) => (
      <TouchableOpacity
      onPress={ () => onPressItemHandler(item) }>
          <Card>
              <CardItem style={{ backgroundColor: '#37BBE1'}}>
                  <Body>
                      <View style={{ paddingTop: 10, width: 135 }}>
                          <Text style={{ 
                             fontSize: 12, 
                             textAlign:'justify', 
                             color: '#fff' }}>
                              {item.info}
                          </Text>
                      </View>
                  </Body>
              </CardItem>
          </Card>
      </TouchableOpacity>)} />      
}

Upvotes: 1

Related Questions