React native components not working properly

Issue

I have this custom button component :

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

import { styles } from "./styles";

class TransactionFees extends Component {

  test = () => {
    const { speed, eth, usd, pressed, changeColor } = this.props;
  }

  render() {
    const { speed, eth, usd, pressed, changeColor, key } = this.props;

    return (
        <TouchableOpacity  style={ pressed ? styles.pressedButton : null } onPress={changeColor}>
          <Text style={styles.transactionFeeTitle}>{speed}</Text>
          <Text style={styles.transactionFeeSubText}>{eth} ETH</Text>
          <Text style={styles.transactionFeeSubText}>$ {usd} </Text>
        </TouchableOpacity>
    );
  }
}

export default TransactionFees;

This is how I use it:

<TransactionFees pressed={pressed} changeColor={this.changeColor}  key={"slow"}  speed={"Slow"} eth={"0.000010"} usd={"0.02"} />
<TransactionFees pressed={pressed} changeColor={this.changeColor}  key={"average"}  speed={"Average"} eth={"0.000030"} usd={"0.03"} />
<TransactionFees pressed={pressed} changeColor={this.changeColor}  key={"fast"} speed={"Fast"} eth={"0.000050"} usd={"0.04"} />

changeColor function:

changeColor = () => {
    const {pressed} = this.state
    this.setState({pressed:!pressed})
  }

When clicked I want only one of them to change the background style but the problem is when clicking on any of them, all of them change the background style any solutions on how to solve this, please?

Solution

You will have to maintain the pressedKey in the parent instead of maintaining the pressed something like below. Here we pass the selected key using the changeColor and maintain that in the parent which will be used to compare and decide the backgroud color.

class TransactionFeesContainer extends Component {
  state = {
    selectedKey: null,
  };

  changeColor = (key) => {
    this.setState({ selectedKey: key });
  };

  render() {
    return (
      <View>
        <TransactionFees
          selectedKey={this.state.selectedKey}
          changeColor={this.changeColor}
          speedkey={'slow'}
          speed={'Slow'}
          eth={'0.000010'}
          usd={'0.02'}
        />
        <TransactionFees
          selectedKey={this.state.selectedKey}
          changeColor={this.changeColor}
          speedkey={'average'}
          speed={'Average'}
          eth={'0.000030'}
          usd={'0.03'}
        />
        <TransactionFees
          selectedKey={this.state.selectedKey}
          changeColor={this.changeColor}
          speedkey={'fast'}
          speed={'Fast'}
          eth={'0.000050'}
          usd={'0.04'}
        />
      </View>
    );
  }
}

class TransactionFees extends Component {
  render() {
    const { speed, eth, usd, speedkey, selectedKey } = this.props;
    return (
      <View>
        <TouchableOpacity
          style={speedkey === selectedKey ? styles.pressedButton : null}
          onPress={() => {
            this.props.changeColor(speedkey);
          }}>
          <Text style={styles.transactionFeeTitle}>{speed}</Text>
          <Text style={styles.transactionFeeSubText}>{eth} ETH</Text>
          <Text style={styles.transactionFeeSubText}>$ {usd} </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Answered By - Guruparan Giritharan