title: How to compare two array in react native?
body: <p>I'm creating a react native app and load contact details into my app. Now I wanted to display an Invite button in front of the contact. My contact details in an array. I have another array with some contact details. I wanted to compare those two arrays and wanted to display the invite button only in contact that not in the second array. How can I do this?</p>
  
  <p><a href="https://i.stack.imgur.com/nPlfc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nPlfc.png" alt="Sample screen"></a></p>
  
  <p><strong>This is what I tried</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    Alert,
    ScrollView,
    FlatList,
  } from 'react-native';
  import {CheckBox} from 'react-native-elements';
  
  export default class Test extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        calls: [
          {"fullname": "Mark Doe",   "phoneNumber":"0112234567", image:"https://bootdey.com/img/Content/avatar/avatar7.png"},
          {"fullname": "Clark Man",  "phoneNumber":"0723434567", image:"https://bootdey.com/img/Content/avatar/avatar6.png"},
          {"fullname": "Jaden Boor", "phoneNumber":"0778902356", image:"https://bootdey.com/img/Content/avatar/avatar5.png"},
          {"fullname": "Srick Tree", "phoneNumber":"0980234589", image:"https://bootdey.com/img/Content/avatar/avatar4.png"},
          {"fullname": "John Doe",   "phoneNumber":"0112255644", image:"https://bootdey.com/img/Content/avatar/avatar3.png"},
          {"fullname": "Mark Doe",   "phoneNumber":"0723567890", image:"https://bootdey.com/img/Content/avatar/avatar2.png"},
          {"fullname": "John Doe",   "phoneNumber":"0778904321", image:"https://bootdey.com/img/Content/avatar/avatar1.png"},
          {"fullname": "Mark Doe",   "phoneNumber":"0785674334", image:"https://bootdey.com/img/Content/avatar/avatar4.png"},
          {"fullname": "Jaden Boor", "phoneNumber":"0713456980", image:"https://bootdey.com/img/Content/avatar/avatar7.png"},
          {"fullname": "Mark Doe",   "phoneNumber":"0112357654", image:"https://bootdey.com/img/Content/avatar/avatar1.png"},
          ],
          Othercalls: [
            {"fullname": "Mark Doe",   "phoneNumber":"0112234567"},
            {"fullname": "Clark Man",  "phoneNumber":"0723434567"},
            {"fullname": "Jaden Boor", "phoneNumber":"0778902356"},
            {"fullname": "Srick Tree", "phoneNumber":"0980234589"},
            {"fullname": "John Doe",   "phoneNumber":"0112255644"},
            ]
      };
    }
  
    renderItem = ({item}) =&gt; {
  
      return (
        &lt;TouchableOpacity&gt;
          &lt;View style={styles.row}&gt;
            &lt;Image source={{ uri: item.image }} style={styles.pic} /&gt;
            &lt;View&gt;
              &lt;View style={styles.nameContainer}&gt;
                &lt;Text style={styles.txtContactList}&gt;{item.fullname}&lt;/Text&gt;
                &lt;Text style={styles.txtPhoneNumber}&gt;{item.phoneNumber}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
            &lt;TouchableOpacity
            style={[styles.inviteContainer, styles.loginButton]}&gt;
            &lt;Text style={styles.inviteText}&gt;Invite&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
  
    render() {
      return(
        &lt;View style={{ flex: 1 }} &gt;
            &lt;Text
            style={{
              fontSize: 26,
              color: '#0080ff',
              textAlign: 'center',
              marginBottom: 30,
              marginTop: 10,
            }}&gt;
            Show Invite Button
          &lt;/Text&gt;
          &lt;FlatList 
            extraData={this.state}
            data={this.state.calls}
            keyExtractor = {(item) =&gt; {
              return item.id;
            }}
            renderItem={this.renderItem}/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      borderColor: '#dcdcdc',
      backgroundColor: '#fff',
      borderBottomWidth: 1,
      padding: 10,
      justifyContent: 'space-between',
    },
    pic: {
      borderRadius: 25,
      width: 50,
      height: 50,
    },
    nameContainer: {
      flexDirection: 'column',
      justifyContent: 'space-between',
      width: 200,
    },
    nameTxt: {
      marginLeft: 15,
      fontWeight: '600',
      color: '#222',
      fontSize: 15,
    },
    txtContactList: {
      fontSize: 18,
      color: 'black',
      marginTop: 5,
      marginLeft: 15,
    },
    txtPhoneNumber: {
      fontSize: 15,
      color: 'black',
      marginTop: 5,
      marginLeft: 15,
    },
    inviteContainer: {
      width: 80,
      height:35,
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 10,
      backgroundColor: 'transparent',
    },
    loginButton: {
      backgroundColor: '#0080ff',
      shadowColor: '#808080',
      shadowOffset: {
        width: 0,
        height: 9,
      },
      shadowOpacity: 0.5,
      shadowRadius: 12.35,
      elevation: 19,
    },
    inviteText: {
      color: 'white',
      fontSize: 18,
    },
  }); 
  </code></pre>
  
  <p>I need to compare arrays "Calls" and "Othercalls" and wanted to display invite button in front of the contact those are not in "Othercalls" array.</p>