React Native - Modal with Flatlist items

Question

I'm making a modal that will popup when the user clicks a flatlist button or items, and there the user will see the details about the item he/she clicks. Basically, I want to pass the items of flatlist to modal.

I'm actually done with the popup of the modal, now I have to show the details like menu description and menu price. I've found a post here in stackoverflow and I follow everything in there but I am having an error regarding with an " id ", and I can't figure out how to fix it.

Here is my code

Details.js

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, Modal, TextInput, TouchableWithoutFeedback, Keyboard
} from 'react-native';

import AddModal from '../Modal/AddModal';

var screen = Dimensions.get('window');

const DismissKeyboard = ({ children }) => (
    <TouchableWithoutFeedback onPress = {() => Keyboard.dismiss()}>
        {children}
    </TouchableWithoutFeedback>
);

export default class Details extends Component {
    static navigationOptions = {
        title: ''
    };
    constructor()
    {
        super ()
        this.state = {
            data: [],
            showModal: false,
            id: null,
        }
    }

    fetchData = async() => {
        const { params } = this.props.navigation.state;
        const response_Cat = await fetch('http://192.168.254.101:3307/categories/' + params.id);
        const category_Cat = await response_Cat.json();
        this.setState({data: category_Cat});
    };

    componentDidMount() {
        this.fetchData();
    };

    _onRefresh() {
        this.setState({ refreshing: true });
        this.fetchData().then(() => {
            this.setState({ refreshing: false })
        });
    };

    _onPressItem(id) {
        this.setState({
            modalVisible: true,
            id: id
        });
    }

    _renderItem = ({item}) => {
        return (
            <TouchableHighlight
                id = { item.menu_desc }
                onPress = { this._onPressItem(item.menu_desc) }
            >
                <View>
                    <Text>{ this.state.id }</Text>
                </View>
            </TouchableHighlight>
        )
    };

  render() {
    const { params } = this.props.navigation.state;
      return (
          <View style = { styles.container }>
            <AddModal
                modalVisible = { this.state.modalVisible }
                setModalVisible = { (vis) => { this.setModalVisible(vis) }}
                id = { this.state.id }
            />
              <FlatList
                data = { this.state.data }
                renderItem = { this._renderItem }
                keyExtractor={(item, index) => index}
                /*refreshControl = {
                    <RefreshControl
                        refreshing = { this.state.refreshing }
                        onRefresh = { this._onRefresh.bind(this) }
                    />
                }*/
              />
          </View>
      );
  }

}

const styles = StyleSheet.create({
...
})

//AppRegistry.registerComponent('Details', () => Details);

AddModal.js

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, TextInput, Modal
} from 'react-native';

export default class AddModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showModal: false,
            id: null
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            showModal: nextProps.showModal,
            id: nextProps.id,
        })
    }

    render() {
        return (
            <Modal
                animationType="slide"
                transparent={ true }
                visible={ this.state.modalVisible }
                onRequestClose={() => { this.props.setModalVisible(false) }}>
                    <View>
                        <View>
                            <Text>{ this.state.id }</Text>
                            <TouchableHighlight
                                onPress = {() => { this.props.setModalVisible(false) }}
                            >
                                <Text>Hide Modal</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
            </Modal>
        )
    }
}

Answer 1

Just wanted to pointout an issue in your code (not related to 'id' error, id error already answer by digit). In the renderItem function, you are calling onPress = { this._onPressItem(item.menu_desc) }, it should be changed to

onPress = { () => this._onPressItem(item.menu_desc) }

I guess, you will call the onPressItem when user click on list item.

EDIT:

I have made a couple of changes to make your code working. Here are the changes.

In your AppModal.js, you are setting modal visibility in showModal: nextProps.showModal , but in the <Modal ...> you have set visible = { this.state.modalVisible }. Also in Details.js you have written <AddModal modalVisible ...>.

First I changed showModal to modalVisible in Details.js and in AppModal.js.

Details.js

constructor()
{
    super ()
    this.state = {
        data: [],
        modalVisible: false,
        id: null,
    }
}

Then I changed _onPressItem(id) to _onPressItem = (id)

Made changes in renderItem as

<TouchableHighlight
   id = { item.enName }
   onPress = { () => this._onPressItem(item.enName) }
>

in render function I have set modal visibility as

<AddModal
  ...
  setModalVisible = { (vis) => { this.setState({
     modalVisible: vis
   })
  }}
  ...
/>

AppModal.js

Changed showModal to modalVisible

constructor(props) {
  super(props);
  this.state = {
    modalVisible: props.modalVisible,
    d: null
  };
}

componentWillReceiveProps(nextProps) {
  this.setState({
    modalVisible: nextProps.modalVisible,
      id: nextProps.id,
  })
}

In the constructor, I have added modalVisible: props.modalVisible.

Hope this will help!