I have following reducer:
const INITIAL_STATE = {
wallets: [],
selectedAccount: null,
selectedNetwork:null
};
export const setActive = (id, payload) => ({
type: actionTypes.SET_ACTIVE,
id,
payload,
});
const editItem = wallets.map(item => (item.id !== action.id ? {
...item, active: false } : { ...item, active: true }));
case actionTypes.SET_ACTIVE:
return {
...state,
accounts: [...state.wallets,editItem],
selectedAccount: action.payload,
};
I console.logged everything and store is being updated but the problem is my component is not re-rendering for some reason.
setActiveFunc = item => {
const { actions } = this.props;
const selectedAcc = {
name: item.name,
address: item.address,
active: item.active,
id: item.id,
};
actions.setActive(item.id, selectedAcc);
};
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 {
setActiveFunc = item => {
const { actions } = this.props;
const selectedAcc = {
name: item.name,
address: item.address,
active: item.active,
id: item.id,
};
actions.setActive(item.id, selectedAcc);
};
render() {
const { GetWallets } = this.props;
return (
<View>
{GetWallets.map(users => (
<TouchableOpacity
onPress={() => {
this.setActiveFunc(users);
}}
key={users.id}
>
<UserMenuAccount
account={`${users.name}`}
balance={0}
active={users.active}
key={users.id}
/>
</TouchableOpacity>
))}
</View>
);
}
}
The function shall create checked icon once active=true and even tho reducer is doing its thing the icon is not appearing
This is the function I'm using in the component, any suggestions?