How to compare two array in react native?

Question

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?

This is what I tried

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}) => {

    return (
      <TouchableOpacity>
        <View style={styles.row}>
          <Image source={{ uri: item.image }} style={styles.pic} />
          <View>
            <View style={styles.nameContainer}>
              <Text style={styles.txtContactList}>{item.fullname}</Text>
              <Text style={styles.txtPhoneNumber}>{item.phoneNumber}</Text>
            </View>
          </View>
          <TouchableOpacity
          style={[styles.inviteContainer, styles.loginButton]}>
          <Text style={styles.inviteText}>Invite</Text>
        </TouchableOpacity>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return(
      <View style={{ flex: 1 }} >
          <Text
          style={{
            fontSize: 26,
            color: '#0080ff',
            textAlign: 'center',
            marginBottom: 30,
            marginTop: 10,
          }}>
          Show Invite Button
        </Text>
        <FlatList 
          extraData={this.state}
          data={this.state.calls}
          keyExtractor = {(item) => {
            return item.id;
          }}
          renderItem={this.renderItem}/>
      </View>
    );
  }
}

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,
  },
});

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.

score 4 · Answer 1 · edited May 14 '20 at 19:01

4

let tempList = this.state.Othercalls.map(item => item.phoneNumber);

let result = this.state.calls.filter(item => (tempList.includes(item.phoneNumber)))

edited May 14 '20 at 19:01

Rajan

1,512
2
14
18

answered May 14 '20 at 06:06

I am new to react-native. How can I show the invite button with this code line? Please help me – Sidath May 14 '20 at 06:25
And this code lines only give Othercalls array numbers only. – Sidath May 14 '20 at 06:29
How Can I display an Invite button after getting values into "result"? Please explain the steps to follow. – Sidath May 15 '20 at 05:23

How to compare two array in react native?

1 Answers1

Linked