CODEWITHSUNDEEP
reactjsreact-native
Vishist Bhoopalam
Vishist Bhoopalam

Reputation: 79

Getting the Error Text Component Must be Rendered

  constructor(props: Props) {
    super(props);
    this.state = {
      SwitchInfo:''
    };
  }

      _renderContent = section => {

    const Clicked = () => {
       if(this.state.SwitchInfo == '0'){
           return<View>
            <Text>{section.id}</Text>
            </View>
       }
       else{
         return <View>
          <Text>{section.id}</Text>
          </View>
       }
     }


    return (
      <View style ={ styles.backgroundswitch} >
      <SwitchSelector
          initial={0}
          height = {25}
          onPress={(value) => this.setState({ SwitchInfo: value })} //{Clicked(value)}}
          textColor={theme.COLORS.MUTED} //'#7a44cf'
          selectedColor={theme.COLORS.WHITE}
          buttonColor={theme.COLORS.ERROR}
          borderColor={theme.COLORS.ERROR}
          hasPadding
          options={[
            { label: "Info", value: "0"  },
            { label: "Error Log",value: "1" }
          ]}
        />
      <View>Clicked()</View>
      </View>
    );
  };

I want to use Switched selector to show different API data when a switch tab is pressed. I am able to get the data and show the required output in terminal (using the console.log() statements) But i am not able to return or show the text in the mobile ui.

Getting the Error: Getting the Error Text Component Must be Rendered I tried adding render inside the clicked function still getting error.

Upvotes: 1

Views: 78

Answers (1)

Christos Lytras
Christos Lytras

Reputation: 37308

You have to add code inside curly brackets in JSX <View>{Clicked()}</View> and not just <View>Clicked()</View> which of course will interpreted as text.

Correct syntax:

<SwitchSelector
  initial={0}
  height = {25}
  onPress={(value) => this.setState({ SwitchInfo: value })} //{Clicked(value)}}
  textColor={theme.COLORS.MUTED} //'#7a44cf'
  selectedColor={theme.COLORS.WHITE}
  buttonColor={theme.COLORS.ERROR}
  borderColor={theme.COLORS.ERROR}
  hasPadding
  options={[
    { label: "Info", value: "0"  },
    { label: "Error Log",value: "1" }
  ]}
/>
  <View>{Clicked()}</View>
</SwitchSelector>

Upvotes: 1

Related Questions