based on radio button selection show a different View page

Question

<RadioButtonRN
            boxStyle={{
              height: hp("6%"),
              width: wp("80%"),
            }}
            activeColor="white"
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={goal}
            selectedBtn={(e) => console.log(e)}
          />

<View style={{ alignItems: "center" }}>
              <Text style={{ color: "red", fontSize: 15, top: hp("5%") }}>
                How much would you like to gain per week?
              </Text>
              <RadioButtonRN
                style={{ top: hp("10%") }}
                boxStyle={{
                  height: hp("6%"),
                  width: wp("80%"),
                }}
                activeColor="white"
                boxActiveBgColor="red"
                textColor="black"
                textStyle={{ fontWeight: "bold" }}
                data={details}
                selectedBtn={(e) => console.log(e)}
              />
            </View>



const goal = [
      {
        label: "Muscle Gain",
      },
      {
        label: "Fat Loss",
      },
      {
        label: "Maintaining",
      },
    ];

    const details = [
      {
        label: "1 pound per week",
      },
      {
        label: "0.5 pounds per week",
      },
      {
        label: "0.25 pounds per week",
      },
    ];

Hi, I am new to programming and I would like to know how I could change the View component depending on the selection of the Radio Button. For example, if the user selects Muscle Gain it would show View components saying "How much would you like to gain per week?" if the user selects Fat Loss it would show a View components saying "How much would you like to lose?"

Jagjeet Singh · Accepted Answer · 2021-03-03T05:50:04.177

You can manage this with states like this for function component

const [selectedGoal,setSelctedGoal] = React.useState(1)

  return (
    <View style={styles.container}>
      <RadioButtonRN
            boxStyle={{
              height:  "6%" ,
              width: "80%" ,
            }}
            activeColor="white"
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={goal}
            initial={selectedGoal}
            selectedBtn={(e) => setSelctedGoal(e.id)} //set Selected id
          />
           <Text style={{ color: "red", fontSize: 15, top:  "5%"  }}>
                How much would you like to {selectedGoal == 1 ? 'Gain' : selectedGoal== 2 ? 'Lose':'Maintain'} per week?
              </Text>
    </View>
  );

For class component

  constructor(props) {
        super(props);
        this.state = { selectedGoal: 1 };
    }

  render(){
    const {selectedGoal} = this.state
    return (
     <View style={styles.container}>
      <RadioButtonRN
            boxStyle={{
              height:  "6%" ,
              width: "80%" ,
            }}
            activeColor="white" 
            boxActiveBgColor="red"
            textColor="black"
            textStyle={{ fontWeight: "bold" }}
            data={goal}
            initial={selectedGoal}
            selectedBtn={(e) => {this.setState({selectedGoal:e.id})}} //set Selected id
          />
           <Text style={{ color: "red", fontSize: 15, top:  "5%"  }}>
                How much would you like to {selectedGoal == 1 ? 'Gain' : selectedGoal== 2 ? 'Lose':'Maintain'} per week?
              </Text>
    </View>
  );
  }

You can use an id for a selected goal

const goal = [
      {
        label: "Muscle Gain",
        id:1
      },
      {
        label: "Fat Loss",
         id:2
      },
      {
        label: "Maintaining",
         id:3
      },
    ];

based on radio button selection show a different View page

1 Answers1