Splicing from an array issue - contact is undefined - react-native

Question

I'm new to react native and i am struggling with the idea of sharing state - i started by creating a contacts app with 2 components - ContactList (class component) , ContactDetail (functional component).
Everything went well until i wanted to share something from the child (functional ) to the parent (class) - the opposite works
I am trying to Splice a contact from the array however, when passing the contact on the function "RemoveContact" on "ContactDetail" i am getting undefined on console.log.
this will not crash my app and the splicing works but it will splice from the end of the array and not the specific index of object i wanted.
can you please guide me with what i have done wrong?
Here is my ContactDetail class component
import React, { Component } from 'react';
import { ScrollView, View } from 'react-native';
import ContactDetail from './ContactDetail.js';
import { Header, Item, Input, Container, Button, Icon, Text } from 'native-base';
const contacts = [
{ firstname: 'a', lastname: 'b', dogname: 'c', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 1 },
{ firstname: 'd', lastname: 'e', dogname: 'f', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 2 },
{ firstname: 'g', lastname: 'h', dogname: 'j', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 3 },
{ firstname: 'k', lastname: 'l', dogname: 'm', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 4 },
{ firstname: 'n', lastname: 'o', dogname: 'p', image: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg', id: 5 }
];
export default class ContactList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
contactsNew: [],
};
}
render() {
const inputValueLet = this.state.inputValue.trim().toLowerCase();
const removeContact = ({ contact }) => {
let index = this.state.contactsNew.indexOf(contact);
console.log(contact);
let nextContacts = this.state.contactsNew;
nextContacts.splice(index, 1);
this.setState({
contactsNew: nextContacts,
});
};
if (contacts.length > 0) {
this.state.contactsNew.filter(contact => contact.dogname.toLowerCase().match(inputValueLet));
const dataRow = this.state.contactsNew.map((contact, index) => (
<ContactDetail key={contact.firstname} contact={contact} removeContact={removeContact} />
));
return (
<View>
<Header searchBar rounded style={{ marginBottom: 10 }} >
<Item>
<Icon name="ios-search" />
<Input
placeholder="find friends"
value={this.state.inputValue}
onChangeText={inputValue => this.setState({ inputValue })}
/>
<Icon name="ios-people" />
</Item>
<Button transparent>
<Text>find friends</Text>
</Button>
</Header>
<ScrollView style={{ height: 400 }} >
{dataRow}
</ScrollView>
</View>
);
}
}
the 2nd Component - ContactDetail - functional component
import React from 'react';
import { View, Image, ListView, TouchableOpacity } from 'react-native';
import { Card, ListItem, Divider } from 'react-native-elements';
import { Button, Icon, Title, Text, Item, Input, Right, SwipeRow } from 'native-base';
const ContactDetail = ({ contact, removeContact }) => {
const { firstname,
dogname,
image } = contact;
return (
<Card style={{ marginTop: 3, marginBottom: 15 }} >
<View style={styles.headerContentStyle}>
<SwipeRow
leftOpenValue={55}
rightOpenValue={-55}
left={
<Button primary onPress={() => { removeContact(contact); }}>
<Icon active name="person" />
</Button>
}
body={
<TouchableOpacity>
<View style={styles.viewContainer}>
<Image
style={styles.thumbnailStyle}
source={{ uri: image }}
/>
<Text style={{ textAlign: 'right' }} >{dogname}</Text>
</View>
</TouchableOpacity>
}
right={
<Button danger onPress={() => {}}>
<Icon active name="trash" />
</Button>
}
/>
<Divider style={{ backgroundColor: 'blue', borderBottomWidth: 0, marginTop: 3 }} />
</View>
</Card>
);
};
export default ContactDetail;

Answer 1

You have a syntax error I believe. You are sending a single object but then trying deconstruct it rather than using it directly.
This,
const removeContact = ({ contact }) => { ... }
should be this
const removeContact = (contact) => { ... }
or this
onPress={() => { removeContact(contact); }}
should be this
onPress={() => { removeContact({contact}); }}