How to click on a button only based on ID that is clicked in React-Native?

Question

I want to click on one of the data lists and change the green color when the id matches what we clicked in React Native. so, if i click callCircleButton in id 1 and just id 1 that change icon with name

Following my code:

constructor(props) {
    super(props);
    this.state = {
        statusButton: true,
        dataList: [
        {id: 1, name: 'te1'},
        {id: 2, name: 'test2'},
        ]
    }

callCircleButton(){
    if(this.state.statusButton == true){
      this.setState({statusButton: false})
    }else{
      this.setState({statusButton: true})
    }
  }

render() {
    return(
        {this.state.dataList.map((data, i) => {
            return (
                <View style={{flex:1, flexDirection: 'row'}}>
                    <Text>data.name</Text>
                    <TouchableOpacity onPress={() => this.callCircleButton()}>
                        { this.state.statusButton ?
                            <Icon active size={25} name='panorama-fish-eye' style={{marginRight:10, color: 'green'}}/>
                            :
                            <Icon active size={25} name='lens' style={{marginRight:10, color: 'white'}}/>
                        }
                    </TouchableOpacity>
                </View>
            )
        })}
    )
}

Answer 1

Set the active button's ID in state when clicked and check against state value in the loop. Example:

constructor(props) {
    super(props)
    this.state = {
      activeButton: null,
      dataList: [
        { id: 1, name: 'te1' },
        { id: 2, name: 'test2' }
      ]
    }

  }

  callCircleButton = (id) => {
    this.setState({ activeButton: id })
  }

  render() {
    return (
      this.state.dataList.map((data, i) => {
        return (
          <View style={{ flex: 1, flexDirection: 'row' }}>
            <Text>{data.name}</Text>
            <TouchableOpacity onPress={() => this.callCircleButton(data.id)}>
              {this.state.activeButton === data.id ?
                <Icon active size={25} name='panorama-fish-eye' style={{ marginRight: 10, color: 'green' }} />
                :
                <Icon active size={25} name='lens' style={{ marginRight: 10, color: 'white' }} />
              }
            </TouchableOpacity>
          </View>
        )
      })
    )
  }

Answer 2

Change your json data structure.

constructor(props) {
    super(props);
    this.state = {
      statusButton: true,
      dataList: [
        { id: 1, name: 'te1', statusButton: false },
        { id: 2, name: 'test2', statusButton: false },
      ]
    }
  }
  callCircleButton({ id }) {
    const dataList = this.state.dataList.map((data, i) => {
      if (data.id === id) return { ...data, statusButton: !data.statusButton };
      return data;
    });
    this.setState({ dataList })
  }
  render() {
    return (
      <View style={{ flex: 1, paddingTop: 50 }}>
        {
          this.state.dataList.map((data, i) => {
            return (
              <View style={{ flexDirection: 'row' }}>
                <Text>{data.name}</Text>
                <TouchableOpacity onPress={() => this.callCircleButton(data)}>
                  {data.statusButton ?
                    <Icon active size={25} name='panorama-fish-eye' style={{ marginRight: 10, color: 'green' }} />
                    :
                    <Icon active size={25} name='lens' style={{ marginRight: 10, color: 'yello' }} />
                  }
                </TouchableOpacity>
              </View>
            )
          })
        }
      </View>
    )
  }