React native state is not working correctly

Question

I have this component :

import React, { Component } from "react";
import { Text, View, Image, TouchableOpacity } from "react-native";

import { styles } from "./styles";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { getAccounts } from "../../redux/user/selectors";

const UserMenuAccount = ({ active, account, balance }) => (
  <View style={styles.accountContainer}>
    <Image
      source={require("../../../assets/Usermenu/check.png")}
      style={[styles.icon, { opacity: active ? 1 : 0 }]}
    />
    <Text style={styles.text}>{account}</Text>
    <Text style={[styles.text, { opacity: 0.5 }]}>{balance} ETH</Text>
  </View>
);

class UserMenuAccounts extends Component {
  state = {
    userAccounts: [],
  };

  updateData  = index  => {
    const {userAccounts} = this.state
    const { GetAccounts } = this.props;
    const data =[...GetAccounts]
    data[index].isActive = data[index].isActive ? false : true
    this.setState({userAccounts:data})
  }

  render() {
    const { userAccounts } = this.state;
    const { GetAccounts } = this.props;
    return (
      <View>
        <Text style={{ opacity: 0.5, fontSize: 16, fontWeight: "bold" }}>
          Click to switch
        </Text>
        {userAccounts.map((users, index) => {
          return (
            <TouchableOpacity onPress={()=>this.updateData(index)}>
              <UserMenuAccount
                account={`${users}`}
                balance={0}
                active={active.isActive || false}
                key={index}
              />
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}

const mapStateToProps = createStructuredSelector({
  GetAccounts: getAccounts,
});

export default connect(mapStateToProps, null)(UserMenuAccounts)

;

The problem is I'm trying to setState active to only one UserMenuAccout but it sets active for all of them , could you please suggest me the way I can fix this ? thanks in advance , I'm grabbing accounts from redux store and mapping them as shown in the code

Answer 1

Try this might help

class UserMenuAccounts extends Component {

  constructor(props){

    this.state = {
      userAccounts: props.GetAccounts,
    };

  }

  updateData(index){
    const data = […this.state.userAccounts];
     data[index].isActive = data[index].isActive? false: true;
    this.setState({userAccounts: data};
  }

  

  render() {
    const { userAccounts } = this.state;
    return (
      <View>
        <Text style={{ opacity: 0.5, fontSize: 16, fontWeight: "bold" }}>
          Click to switch
        </Text>
        {userAccounts.map((users, index) => {
          return (
            <TouchableOpacity onPress={()=> this.updateData(index)}>
              <UserMenuAccount
                account={`${users}`}
                balance={0}
                active={users.isActive || false}
                key={index}
              />
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }
}