React-native how to bind RadioButton conditionaly?-CodePudding

I use RadioButton from https://www.npmjs.com/package/rn-radio-button-group

and I need conditionaly hide 1 radio button element, if condition is true, everything works ok, but if condition is false, it throws error: React.cloneElement(...): The argument must be a React element, but you passed null.

my code is below, see condition { false &&:

import React, { Fragment, useEffect, useState } from "react";
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import RadioButton, { RadioGroup } from "rn-radio-button-group";

export default function App() {
  const [langValue, setLangValue] = useState("");
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
<Text>Test</Text>

      <RadioGroup
        onValueChange={(value) => setLangValue(value)}
        selectedValue={langValue}
      >
        <RadioButton
          value={"green"}
          style={{ marginBottom: 10 }}
          size={27}
          color="green"
        >
          <Text style={{ marginLeft: 10, fontSize: 18 }}>Green</Text>
        </RadioButton>
        { false &&
        <RadioButton
          value={"red"}
          style={{ marginBottom: 10 }}
          size={27}
          color="red"
        >
        
          <Text style={{ marginLeft: 10, fontSize: 18 }}>Red</Text>
        </RadioButton>
        }

        <RadioButton
          value={"yellow"}
          style={{ marginBottom: 10 }}
          size={27}
          color="yellow"
        >
          <Text style={{ marginLeft: 10, fontSize: 18 }}>Yellow</Text>
        </RadioButton>

        <RadioButton
          value={"orange"}
          style={{ marginBottom: 10 }}
          size={27}
          color="orange"
        >
          <Text style={{ marginLeft: 10, fontSize: 18 }}>Orange</Text>
        </RadioButton>
      </RadioGroup>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

you can also find it here: https://snack.expo.dev/4Y96Oh0Xf

appreciate any help!

CodePudding user response：

You'd have to do something like

{condition ? 
<RadioButtonComponent/> : null}

CodePudding user response：

To conditionally hide a element in the rn-radio-button-group library, you can use the component from the React library.

The component allows you to return multiple elements from a component without adding an additional element to the DOM, so you can use it to wrap the element and return it only when the condition is true.

Here is an example of how you can do this:

import React, { Fragment } from "react";
import { Text, View, StyleSheet } from "react-native";
import Constants from "expo-constants";
import RadioButton, { RadioGroup } from "rn-radio-button-group";

export default function App() {
  const [langValue, setLangValue] = useState("");
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get a shareable url.
      </Text>
      <Text>Test</Text>

      <RadioGroup
        onValueChange={(value) => setLangValue(value)}
        selectedValue={langValue}
      >
        <RadioButton
          value={"green"}
          style={{ marginBottom: 10 }}
          size={27}
          color="green"
        >
          <Text style={{ marginLeft: 10, fontSize: 18 }}>Green</Text>
        </RadioButton>
        {false && (
          <Fragment>
            <RadioButton
              value={"red"}
              style={{ marginBottom: 10 }}
              size={27}
              color="red"
            >
              <Text style={{ marginLeft: 10, fontSize: 18 }}>Red</Text>
            </RadioButton>
          </Fragment>
        )}

        <RadioButton
          value={"yellow"}
          style={{ marginBottom: 10 }}
          size={27}
          color="yellow"
        >
          <Text style={{ marginLeft: 10, fontSize: 18 }}>Yellow</Text>
        </RadioButton>

        <RadioButton
          value={"orange"}
          style={{ marginBottom: 10 }}
          size={27}
          color="orange"
        >
          <Text style={{ marginLeft: 10, fontSize: 18 }}>Orange</Text>
        </RadioButton>
      </RadioGroup>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
  },
});

In the code above, the <Fragment> component is used to wrap the <RadioButton> element and return it only when the condition is true. This will prevent the error that you were experiencing and allow you to conditionally hide the <RadioButton> element.