React Native pass data into modal

Question

I'm still new in react native and programming, and i am trying to pass items from my flat list into a modal. What i'm about to pass is the icon, status, and description. How am i supposed to do that?

this is my flatlist

 buildPanel(index, item) { let panel = []; let keys = DBkeys['Requests'].MyRequest; let status = item[keys['status']]; panel.push(<View style={{ position: 'absolute', right: 0, bottom: 0, padding: normalize(5), alignItems: 'center' }} key={'status'}> <TouchableOpacity onPress={this.handleShowModal}> <Icon name={img.itemStatus[status].name} type={img.itemStatus[status].type} color={img.itemStatus[status].color} size={normalize(38)} /> </TouchableOpacity> </View>); return panel; } <View style={[styles.panelContainer, status === 'success' ? {} : { backgroundColor: color.white }]}> <FlatList showsVerticalScrollIndicator={false} progressViewOffset={-10} refreshing={this.state.refreshing} onRefresh={this.onRefresh.bind(this)} onMomentumScrollEnd={(event) => event.nativeEvent.contentOffset.y === 0 ? this.onRefresh() : null} data={content} renderItem={({ item }) => item} keyExtractor={(item, key) => key.toString()} /> </View> <IconModal visible={this.state.modalVisible} close={this.handleDismissModal}/>

and this is my IconModal.js

 const IconModal = (props) => { return( <Modal isVisible={props.visible} onBackdropPress={props.close} > <View style={styles.dialogBox}> <View style={styles.icon}> <Icon name='open-book' type='entypo' color='#ffb732' size={normalize(70)} /> </View> <View style={styles.text}> <Text style={styles.status}>Status</Text> <Text>Desc</Text> </View> <TouchableOpacity onPress={props.close}> <View> <Text style={styles.buttonText}>GOT IT</Text> </View> </TouchableOpacity> </View> </Modal> ) } IconModal.propTypes ={ visible: PropTypes.bool.isRequired, close: PropTypes.func, }

Answer 1

from the renderItem of your FlatList ,

You must be clicking somewhere to open modal,

when you click store that whole single item in state variable,

like, if you're using TouchableOpacity then

<TouchableOpacity onPress={this.passDataToModal}/>
...
...
passDataToModal=(item)=>{
 this.setState({modalData:item},()=>{
   //you can open modal here
});
}

and in your modal component,

you can pass data with prop.

<IconModal modalData={this.state.modalData} visible={this.state.modalVisible} close={this.handleDismissModal}/>

and you can use these data in IconModal as this.props.modalData .

If there is more data then you can always add another prop.

Answer 2

Define the following Hooks in your function Component.

const [modalVisible, setModalVisible] = useState(false);
const [modalData, setModalData] = useState([]);
const [modalTitle, setModalTitle] =  useState('');

Now Trigger the function which opens the Modal, while simultaneously passing data into it.

<TouchableHighlight underlayColor="skyblue" onPress={() => { openSettingsModal(title,settings) } }>
    Open Modal
</TouchableHighlight>

Here is the function code -

const openSettingsModal = (title,settings) => {
    setModalTitle(title);
    setModalData(settings);
    setModalVisible(!modalVisible);
}

And finally a snippet of the Modal Code.

<Modal animationType="none" transparent={true} visible={modalVisible} >
    <View style={styles.centeredView}>
        <Text> { modalTitle }</Text>
        <Text> { modalData }</Text>
    </View>
</Modal>

Answer 3

For example:

class Container extends Component { constructor(props) { super(props) this.state = { modalVisible: false, activeItemName: '', //state property to hold item name activeItemId: null, //state property to hold item id } }

openModalWithItem(item) {
    this.setState({
        modalVisible: true,
        activeItemName: item.name,
        activeItemId: item.id
    })
}

render() {

    let buttonList = this.props.item.map(item => {
        return (
            <TouchableOpacity onPress={() => { this.openModalWithItem(item) }}>
                <Text>{item.name}</Text>
            </TouchableOpacity>
        )
    });

    return (
        <View>
            {/* Example Modal Component */}
            <Modal isOpen={this.state.openDeleteModal}
                itemId={this.state.activeItemId}
                itemName={this.state.activeItemName} />
            {buttonList}
        </View>
    )
}

}