How to make specific component functional in a flatlist? - react-native

Question

I am making an app where anyone can join a fantasy golf tournament. On my homepage there is a flatlist which is receiving data from api. There will be many tournaments but the user can only join the upcoming one. Now what i want to do is disable the functionality of every other tournament that means there is a join button through which user can join so i want to disable every other button and only enable the upcoming tournament button. What should i do?
here's my code
const Item = ({ title, location, date, Id }) => (
<View style={styles.renderItemView}>
<View style={styles.imageView}>
<Image style={styles.imageView2} source={require('../../assets/golf.png')} />
</View>
<View style={styles.TextView}>
<Text style={styles.Text}>Name: {title}</Text>
<Text style={styles.Text}>Location: {location}</Text>
<Text style={styles.Text}>StartDate: {moment(date).format('DD-MM-YYYY')}</Text>
<Text style={styles.Text}>Contest Fee: $49</Text>
</View>
<View style={styles.JoinView}>
<TouchableOpacity onPress={() =>{
navigation.navigate('Join', {key:Id, date});
}} style={styles.Touch1}>
<Text style={styles.JoinText}>Join</Text>
</TouchableOpacity>
</View>
</View>
);
const renderItem = ({ item }) => (
<View>
<Item title={item.name} location={item.location} date={item.startDate} Id={item.Id} />
</View>
);```

Answer 1

You could use row index and modulus operator to define the disabled prop like this:
const renderItem = ({ item, index }) => (
<View>
<Item title={item.name} disabled={index % 1 === 1} location={item.location} date={item.startDate} Id={item.Id} />
</View>
);`
And the use it in the Item component on the TouchableOpacity like this:
const Item = ({ disabled }) => (
<View>
...other stuff
<TouchableOpacity disabled={disabled} />
</View>
)
<TouchableOpacity disabled={props.disabled} />