title: How to hide and display input fields on basis on checkbox true false in react native
body: <p>Thee are three vales in array <code>socialMediaDetail[]</code>,
  I have to show and hide below input fields on basis of checkbox , if checkbox is true then show else hide .And this check box true and false I have to set on array response . <code>if name ==="twitter" ?true:false</code>; and I have to show twitter link in below twitter input fields .
  but all values in array in this array 3 name and 3 links . How can put the conditions .Please help please </p>
  
  <p>How can I achieve below  ,outside function value I have to access in state</p>
  
  <pre><code>class UpdateNotificationpreference extends Component {
    constructor(props) {
      super(props);
      const{navigation}=this.props;
      const{contactDetails,socialMediaDetails}= navigation.state.params.customerInfo[0];
      const{socialMediaDetail}=socialMediaDetails;
      socialMediaDetail.map((data, index) =&gt; {
        const twitter= data.name==="twitter";
      });
      this.state = {
        title: 'Update Notification Preference',
        mobile: navigation.state.params.serviceNumber,
        icon: 'sim',
        isChecked: false,
        email: navigation.state.params.customerInfo[0].contactDetails.emailId,
        smsNum: navigation.state.params.customerInfo[0].contactDetails.mobileNo,
        phoneNum: navigation.state.params.customerInfo[0].contactDetails.mobileNo,
        isContactByEmail: navigation.state.params.customerInfo[0].contactDetails.isContactByEmail==="Y"?true : false,
        isContactByPost:navigation.state.params.customerInfo[0].contactDetails.isContactByPost==="Y"?true : false,
        isContactBySms: navigation.state.params.customerInfo[0].contactDetails.isContactBySms==="Y"?true : false,
        facebook: navigation.state.params.customerInfo[0].socialMediaDetails.socialMediaDetail[1].name==="facebook"?true : false,
        isTwitter:this.twitter==="twitter"?true:false,
  </code></pre>
  
  <p>Below is array value:</p>
  
  <pre><code>socialMediaDetails:
    socialMediaDetail: Array(2)
      0:
        link: "HARIRAM@twitter.com"
        name: "twitter"
        __typename: "SocialMediaDetail"
        __proto__: Object
      1:
        link: "VarnaHERO@facebook.com"
        name: "facebook"
        __typename: "SocialMediaDetail"
        __proto__: Object
      2:
        link: "linkedIn@linkedin.com"
        name: "linkedIn"
        __typename: "SocialMediaDetail"
  </code></pre>
  
  <p>Here is the code:</p>
  
  <pre class="lang-js prettyprint-override"><code>  &lt;RegularText style={{ fontWeight: 'normal' }} text={`SOCIAL MEDIA`} textColor="dimgrey"/&gt;
  &lt;/View&gt; 
  &lt;View style={{borderBottomColor: 'dimgrey',borderBottomWidth: 0.3, color:'dimgrey'}} /&gt;
  
  &lt;View style={{ flex: 1, justifyContent: 'center',paddingLeft:15,marginTop:8,marginBottom:15 }}&gt;
    &lt;View style={{flexDirection:'column', marginBottom:15,marginTop:8}}&gt;
      &lt;View style={{flexDirection:'row'}}&gt;
        &lt;View &gt;
        &lt;CheckBox color="#00678f" checked={true}/&gt;
        &lt;/View&gt;
        &lt;View style={{flex:1}}&gt;
          &lt;Text style={{fontSize:14}}&gt;Facebook&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={{flex:1}}&gt;
          &lt;CheckBox color="#00678f"
           checked={true}
            onPress={() =&gt;this.handleChangeEmail()}/&gt;
        &lt;/View&gt;
        &lt;View style={{flex:1}}&gt;
          &lt;Text style={{fontSize:14}}&gt;Whatsapp&lt;/Text&gt;
        &lt;/View&gt;
        &lt;View style={{flex:1}}&gt;
          &lt;CheckBox color="#00678f" 
          checked={true}
           onPress={() =&gt;this.handleChangeSMS()}/&gt;
        &lt;/View&gt;
        &lt;View style={{flex:1}}&gt;
          &lt;Text style={{fontSize:14}}&gt;Twitter&lt;/Text&gt;
        &lt;/View&gt;
  
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;View style={{marginBottom:15,paddingLeft:15}}&gt;
    &lt;View&gt;
      &lt;View style={{
        flexDirection:'row', backgroundColor:'#fff',marginBottom:8}}&gt;
        &lt;IconSmall icon="facebook" type="MaterialCommunityIcons" style={{ color: '#808080',paddingRight: 5 }}/&gt;
        &lt;SmallText textColor="grey" text={`Facebook`}/&gt;
      &lt;/View&gt;
      &lt;Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}&gt;
        &lt;Input
          value={this.state.email}
          onChangeText={(text) =&gt; this.setState({email:text})}
        /&gt;
      &lt;/Item&gt;
    &lt;/View&gt;
    &lt;View style={{marginTop:15}}&gt;
      &lt;View style={{
        flexDirection:'row', backgroundColor:'#fff',marginBottom:8}}&gt;
      &lt;IconSmall icon="whatsapp" type="MaterialCommunityIcons" style={{ color: '#808080',paddingRight: 5 }}/&gt;
      &lt;SmallText textColor="grey" text={`Whatsapp`}/&gt;
      &lt;/View&gt;
      &lt;Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}&gt;
        &lt;Input
          value={this.state.smsNum}
          onChangeText={(text) =&gt; this.setState({smsNum:text})}
        /&gt;
      &lt;/Item&gt;
    &lt;/View&gt;
    {this.state.twitter=== true  &amp;&amp;
      &lt;View style={{marginTop:15}}&gt;
        &lt;View style={{
            flexDirection:'row', backgroundColor:'#fff'}}&gt;
          &lt;IconSmall icon="twitter" type="MaterialCommunityIcons" style={{ color: '#808080',paddingRight: 5 }}/&gt;
          &lt;SmallText textColor="grey" text={`Twitter`}/&gt;
        &lt;/View&gt;
        &lt;Item style={{borderColor: '#00fff', borderBottomWidth:1, marginLeft:0}}&gt;
          &lt;Input
            value={this.state.faxNum}
            onChangeText={(text) =&gt; this.setState({faxNum:text})}
          /&gt;
        &lt;/Item&gt;
      &lt;/View&gt;}
  &lt;/View&gt;
  </code></pre>
  
  <p>Thanks </p>