React Native: Change boolean value of component property depending on if active or not

Question

I have a React Native component that consists of 3 buttons components, each one has a boolean property called inner. If inner={true} then the button appears pressed in, whereas if inner={false} then the button appears embossed.

Only one button can be active at any one time, I'd like to make it such that the active button will display inner={true} and the other two inactive buttons will display inner={false}.

Here is my code below:

const ChoiceContainer = props => {
  const {children} = props;

  return <View>{children}</View>;
};

const SendTransaction = () => (
  <ChoiceContainer>
    <Text>Component 1</Text>
  </ChoiceContainer>
);

const Remove = () => (
  <ChoiceContainer>
    <Text>Component 2</Text>
  </ChoiceContainer>
);

const History = () => (
  <ChoiceContainer>
    <Text>Component 3</Text>
  </ChoiceContainer>
);

export default class MyComponent extends Component {
  state = {
    sceneType: 'add',
  };

  showSend = () => {
    this.setState({sceneType: 'add'});
  };

  showReceive = () => {
    this.setState({sceneType: 'remove'});
  };

  showHistory = () => {
    this.setState({sceneType: 'history'});
  };

  renderScene = type => {
    if (type === 'add') {
      return <SendTransaction />;
    }

    if (type === 'remove') {
      return <ReceiveTransaction />;
    }

    if (type === 'history') {
      return <TransactionHistory />;
    }
  };

  render() {
    const {sceneType} = this.state;

    return (
      <View>
        <View>
          <TouchableOpacity onPress={this.showAdd}>
            <Button inner={true}>Button 1</Button>
          <TouchableOpacity onPress={this.showRemove}>
            <Button inner={false}>Button 2</Button>
          </TouchableOpacity>
          <TouchableOpacity onPress={this.showHistory}>
            <Button inner={false}>Button 3</Button>
          </TouchableOpacity>
        </View>
        <View>{this.renderScene(sceneType)}</View>
      </View>
    );
  }
}

ali erenkara · Accepted Answer · 2020-06-11 09:48:03Z

2

     <TouchableOpacity onPress={this.showAdd}>
        <Button inner={sceneType === 'add' }>Button 1</Button>
      <TouchableOpacity onPress={this.showRemove}>
        <Button inner={sceneType === 'remove'}>Button 2</Button>
      </TouchableOpacity>
      <TouchableOpacity onPress={this.showHistory}>
        <Button inner={sceneType=== 'history'}>Button 3</Button>
      </TouchableOpacity>

answered Jun 11, 2020 at 9:48

ali erenkara

792 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GrapeJam Over a year ago

That worked - I did not realize I could pass conditions in like that. Thank you so much!

Collectives™ on Stack Overflow

React Native: Change boolean value of component property depending on if active or not

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related