How to make “condition for component” in react native

Question

I want to make condition if this.props === "0", the component will show on screen and when else, the component will hide. How to make it?

I tried use react-native condition and doesn't work

this for my code:

{data.is_approved === '0' ? (
  <TouchableOpacity
    onPress = {() => this.deleteTrancation(data.id, data.sales_id)}
    style={[styles.icons, common.backgroundWarn]}
  >
    <Icon name="clear" size={18} color={color.colorOff} />
  </TouchableOpacity>
) : (
  <Text style={[common.textValid]}></Text>
)}

my complete code: https://pastebin.com/U9p5akdi

I expect when string "0", the component will show and else, the component will hide

Answer 1

See whether if it works. May be you missed integer type as string type

{data.is_approved === 0 ? (
                  <TouchableOpacity
                      onPress = {() => this.deleteTrancation(data.id, data.sales_id)}
                      style={[styles.icons, common.backgroundWarn]}>
                    <Icon name="clear" size={18} color={color.colorOff} />
                  </TouchableOpacity>
                  ) : (
                    <Text style={[common.textValid]}></Text>
                  )}

Answer 2

its working for any condition 0 is string OR Number

 { data.is_approved == '0' ? <TouchableOpacity/> : <Text style={[common.textValid]}></Text> } 

Answer 3

I have created a sample on codesandbox of working sample for you.

https://codesandbox.io/s/react-native-04dfj

FirstComponent

import React, { Component, Fragment } from "react";
import SecondComp from "./SecondComp";

class FirstComp extends Component {
  state = {
    renderSecond: true
  };

  render() {
    const { renderSecond } = this.state;
    return (
      <Fragment>
        Change renderSecond state of FirstComp {renderSecond && <SecondComp />}
      </Fragment>
    );
  }
}

export default FirstComp;

Second Component

import React, { Component } from "react";

class SecondComp extends Component {
  render() {
    return <div>Rendering Second Component</div>;
  }
}

export default SecondComp;

In the first component there is a state

 state = {
        renderSecond: true
      };
You can change the renderSecond value to false and second component will not render.
Please check the link for working sample and you can even pass this value as prop from the parent component

Answer 4

you shold pass some flag like ShowSecondComponent" to the second component from 1st component.

In your 1st component code

 <Fragment> Change renderSecond state of FirstComp {renderSecond && <SecondComp ShowSecondComponent ={this.state.renderSecond} />} </Fragment 

Receive the prop in second component and use it inside render method of second component with if.

 class SecondComp extends Component { render() { if(!this.props.ShowSecondComponent) return null; return <div>Rendering Second Component</div>; } } 

Hope it helps