How to make specific component functional in a flatlist?

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} />