ScrollView item data passed to parent is returning as undefined

Question

I've been trying to understand why when passing data to a callback function from a scrollview item the parent component is receiving undefined. I have a console.log in the item component and it logs the correct value however the log in the parent component logs undefined... also the remove Item component successfully removes the component, however, the log in that function returns undefined aswell... At this point I'm not sure if it's the module I'm using or react-natives scrollView... Thanks for any-help.

The child, Item compoent

render() {
        const {data, active } = this.props;
        const key = data.key;
        console.log(key);
        return (
            <Animated.View style={[
                styles.row,
                this._style,
            ]}>
                <Text style={styles.text}>{data.role}</Text>
                <Text style={styles.nameText}>{data.name}</Text>
                <TouchableOpacity onPress={() => {this.props.onRemove(key)}}>
                    <Text>X</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => {this.props.modalTwo(key)}}>
                    <Text>  E</Text>
                </TouchableOpacity>
            </Animated.View>
        );
    }

The parent component functions and render methods

_renderRow = ({data, active}) =>{
        return <Role data={data} onRemove={() => {this.removeItem()}} modalTwo={() =>{this.openModalTwo()}}/>
    }

 removeItem = (key) => {
    const newRoleList = this.state.roleList.slice();
    console.log(key);
    const roleIndex = newRoleList.findIndex(item => item.key === key);
    console.log(key);
    newRoleList.splice(roleIndex,1);
    this.setState( {roleList: newRoleList});
}

openModalTwo = (key) => {
    console.log(key);
    const newObjectArray = this.state.roleList.slice();
    console.log('newObjectArray: ',newObjectArray);
    const editObject = newObjectArray.find(item => item.key === key );
    console.log('editObject:',editObject);
    this.setState({modalVisibleTwo:!this.state.modalVisibleTwo, editObject: editObject});
}

render(){
    reindex = (indexes, sourceArray) => indexes.map(i => sourceArray[i]); 
    return(
        <KeyboardAvoidingView
            behavior="padding"
            style={styles.listContainer}
        > 
            <Modal
                isVisible = {this.state.modalVisible}
                onSwipe = {() => {this.setState({modalVisible: !this.state.modalVisible})}}
                swipeDirection="right"
            >
                <View style={styles.modalContainer}>
                    <View style={styles.textInputContainer}>
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Role'}
                            underlineColorAndroid={'#ffffff'}
                            onChangeText={(text) => this.updateTextInput('role',text)}
                        />
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Name'}
                            underlineColorAndroid={'#ffffff'}
                            onChangeText={(text) => this.updateTextInput('name',text)}
                        />
                    </View>
                    <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.state.nameInput && this.state.roleInput != '' ? this.addAnotherRole() : this.reset();}}>
                            <Text style={styles.buttonText}>{this.state.nameInput && this.state.roleInput != '' ? 'Update' : 'Close'}</Text>
                    </TouchableOpacity>
                </View>
            </Modal>
            <Modal
                isVisible = {this.state.modalVisibleTwo}
                onSwipe = {() => {this.setState({modalVisibleTwo: !this.state.modalVisibleTwo})}}
                swipeDirection="right"
            >
                <View style={styles.modalContainer}>
                    <View style={styles.textInputContainer}>
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Role'}
                            underlineColorAndroid={'#ffffff'}
                            // value={this.state.editObject.role}
                            onChangeText={(text) => this.updateTextInput('role',text)}
                        />
                        <TextInput 
                            style={styles.textInput} 
                            placeholder={'Enter Name'}
                            underlineColorAndroid={'#ffffff'}
                            // value={this.state.editObject.name}
                            onChangeText={(text) => this.updateTextInput('name',text)}
                        />
                    </View>
                    <TouchableOpacity style={styles.buttonStyle} onPress={() => {this.state.nameInput && this.state.roleInput != '' ? this.addAnotherRole() : this.reset();}}>
                            <Text style={styles.buttonText}>{this.state.nameInput && this.state.roleInput != '' ? 'Update' : 'Close'}</Text>
                    </TouchableOpacity>
                </View>
            </Modal>
            <Text style={styles.taskTitle}>Company Roles</Text>
            <Text style={styles.introBlurb}>Paragraph On how to use this component</Text>
            <View style={styles.titleContainer}>
                <Text style={styles.title}>Title</Text>
                <Text style={styles.title}>Name</Text>
            </View>
            <SortableList
                style={styles.List}
                data={this.state.roleList}
                renderRow={this._renderRow}
                // onChangeOrder ={(nextOrder) => {this.setState({ roleList: reindex(nextOrder, this.state.roleList)})}}
            />
            <TouchableOpacity style={styles.addButton} onPress={() =>{this.setState({modalVisible: !this.state.modalVisible})}}>
                <Text style={styles.addText}>Add another role</Text>
            </TouchableOpacity>
        </KeyboardAvoidingView>
    );
}

}

Module I'm using: https://www.npmjs.com/package/react-native-sortable-list

Answer 1

You're not passing the parameter along for the callback prop in _renderRow. For example,

onRemove={() => {this.removeItem()}}

should either be:

onRemove={(key) => {this.removeItem(key)}}

or just:

onRemove={this.removeItem}