React JS: Modal component not rendering

Question

App runs fine but when I click on items Modal component is not rendered. Not sure why. Can someone help me pls.

Complete source code here: -- https://www.webpackbin.com/bins/-KpOwCBrjy_PlP5t6-IH. You can modify source online and play with it.=.

app.js

import React, { Component } from 'react'
import {   // apis
  Animated,
  AppState,
  AsyncStorage,
  Clipboard,
  Dimensions,
  I18nManager,
  NetInfo,
  PanResponder,
  PixelRatio,
  StyleSheet,
  // components
  ActivityIndicator,
  Button,
  Image,
  ProgressBar,
  ScrollView,
  Switch,
  Text,
  TextInput,
  TouchableOpacity,
  TouchableHighlight,
  TouchableWithoutFeedback,
  View,
Modal } from 'react-native-web'
import ReactDOM from 'react-dom';

export default class App extends Component {
   state = {
      orders: [
         {
            id: '0',
            name: '#0',
            description: 'need pacemakers',
            created_time: '7/1/2017 09:00',
            created_by: 'Dr. John Chambers, M.S.',
            approval_status: 'Pending',
            requesting_dept: 'Cardiology',
            items:
            [
              {
                id: '0',
                name: 'single chamber pacemaker',
                quantity: 10,
                price: 50,
                totalCost: 500
              },
              {
                id: '1',
                name: 'dual chamber pacemaker',
                quantity: 10,
                price: 100,
                totalCost: 1000
              }
            ]
         },
         {
           id: '1',
           name: '#1',
           description: 'ordering a camera',
           created_time: '7/3/2017 09:00',
           created_by: 'Dr. Susan Murray, M.S.',
           approval_status: 'Approved',
           requesting_dept: 'Gastroenterology'
         },
         {
           id: '2',
           name: '#2',
           description: 'thyroid surgery instruments',
           created_time: '7/3/2017 13:00',
           created_by: 'Dr. Robert Dsouza, M.S.',
           approval_status: 'Approved',
           requesting_dept: 'General surgery'
         },
         {
           id: '3',
           name: '#3',
           description: 'anaesthetic for Caesarean sections',
           created_time: '7/3/2017 13:00',
           created_by: 'Dr. Gregory House, M.D.',
           approval_status: 'Approved',
           requesting_dept: 'Anaesthetics'
         }
      ]
   }

   alertItemName = (item) => {
     return (
       <Modal
        animationType={'slide'}
        transparent={false}
        visible={true}
        >
        <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
        <View>
        <Text>Modal!</Text>
        </View>
        </View>
      </Modal>
     );
   }

   render() {
      return (
         <View>
            {
               this.state.orders.map((item, index) => (
                  <TouchableOpacity
                     key = {item.id}
                     style = {styles.container}
                     onPress = {() => this.alertItemName(item)}
                  >
                     <Text style={styles.textBold}>
                        {item.name}
                     </Text>
                     <Text style={styles.textBold}>
                        {item.description}
                     </Text>
                     <Text style={styles.text}>
                        {item.created_by}
                     </Text>
                     <Text style={styles.text}>
                        {item.created_time}
                     </Text>
                     <Text style={styles.text}>
                        {item.requesting_dept}
                     </Text>
                     <Text style={styles.text}>
                        {item.approval_status}
                     </Text>
                  </TouchableOpacity>
               ))
            }
         </View>
      )
   }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

package.json

{
  "name": "webpackbin-project",
  "version": "1.0.0",
  "description": "Project boilerplate",
  "scripts": {
    "start": "webpack-dev-server --content-base build/ --port 3000"
  },
  "dependencies": {
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-native-web": "0.0.113"
  },
  "devDependencies": {
    "html-webpack-plugin": "2.22.0",
    "webpack-dev-server": "2.3.0",
    "webpack": "^2.2.0",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "babel-plugin-transform-class-properties": "^6.23.0"
  },
  "author": "WebpackBin",
  "license": "ISC"
}

Answer 1

Ok I updated your fiddle in a "quick and dirty way". Basically, all I did was setting a showModal bool in your state. When you click on your component, it set showModal to true. As state changed, render is called. Render check for you showModal bool, if its true, it renders it.

You can add a modalMessage in your state, add a function to hide your model (simply setState with showModal:false), and you're good !

alertItemName = (item) => {
 this.setState({...this.state, showModal:true}); //setState re-renders
}

render() {
if (this.state.showModal) { // State condition
   modal = 
   (<Modal
    animationType={'slide'}
    transparent={false}
    visible={true}
    >
    <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
    <View>
    <Text>Modal!</Text>
    </View>
    </View>
  </Modal>);
 }

  return (
    <div>
    {modal} //showing modal, if null, shows nothing
     <View>
        {
           this.state.orders.map((item, index) => (
              <TouchableOpacity
                 key = {item.id}
                 style = {styles.container}
                 onPress = {() => this.alertItemName(item)}
              >
                 <Text style={styles.textBold}>
                    {item.name}
                 </Text>

              </TouchableOpacity>
           ))
        }
     </View>
    </div>