React Native - Single select in Flatlist

Question

I'm trying to make a simple button with text where if a user taps on it, it would change it's colour and text. This button with text is displayed in my Flatlist I can now change the text on it if it is tapped, but the problem is the other buttons with text in my Flatlist is also changing.

What I'am targeting is to change the single button that will be tapped.

Here's my code.

export default class tables extends Component {
    constructor(props){
        super(props)
        this.state = {
            data: [],
            ...
            toggle: true,
        }
    }
    _onPress() {
        const newState = !this.state.toggle;
        this.setState({ toggle: newState })
    }
    render() {
        const { toggle } = this.state;
        const textValue = toggle?"Available":"Occupied";
        const buttonBg = toggle?"dodgerblue":"white";
        const textColor = toggle?"white":"black";
        return (
            <View>
                <FlatList
                ....
                renderItem = {({ item }) => 
                    <View>
                        <Text>Table No: { item.tbl_id }</Text>

                        <TouchableHighlight
                        onPress = { () => this._onPress()}>
                            <Text>{textValue}</Text>              // Button with text
                        </TouchableHighlight>

                            <View>
                                <TouchableHighlight
                                ....>
                                    <Text>DINE-IN</Text>
                                </TouchableHighlight>

                                <TouchableHighlight
                                ....
                                    <Text>TAKE-OUT</Text>
                                </TouchableHighlight> 
                            </View>
                    </View>
                }
                />
            </View>
        )
    }
}

Answer 1

The toggle: true, value must be in the item

Actually your bollean affect all the items present in data. Your item should look like this:

data: [
 { itemName: 'hi', toggle: false, id: 1 },
 { itemName: 'hey', toggle: false, id: 2 },
 // others items
] 

then, your onPress:

 onPress = (id) => {
    const { data } = this.state
    data.forEach((elem) => {
      elem.toggle = false
      if (elem.id === id) {
        elem.toggle = true
      }
    })
    this.setState({ data })
  }

In the map:

<TouchableHighlightonPress = { () => this._onPress(item.id)}>
<Text>{item.toggle ? "Available" : "Occupied"}</Text>

You could do it in another way by storing the item.id in this.state.toggle and then have something easier:

 onPress = (id) => {
   this.setState({ toggle: id })  
 }

<Text>{item.id === this.state.toggle ? "Occupied": "Available" }</Text>