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

score 5 · Answer 1 · answered Jul 08 '19 at 03:50

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.

could you give me more example, i still don't get it – Billy Ronaldo Chandra Jul 08 '19 at 06:29 — Billy Ronaldo Chandra, Jul 08 '19 at 06:29

score 3 · Answer 2 · edited Aug 20 '20 at 06:57

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>

This implementation give us this warning "Warning: Cannot update a component (`%s`) while rendering a different component (`%s`). To locate the bad setState() call inside `%s`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render%s," — NoloMokgosi, Mar 05 '23 at 06:51

score 0 · Answer 3 · answered Jul 08 '19 at 11:30

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

}

React Native pass data into modal

3 Answers3