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

Actually, you're not asking it to render anywhere. You're just returning it on press. You should change your state in your alertItemName — Nevosis
– Nevosis, Commented Jul 19, 2017 at 8:55
Check alertItemName method. No need to change state. visible={true} — user1
– user1, Commented Jul 19, 2017 at 9:28
I don't know how persistent my changes are on webpackbin, but I updated it and answered you with the exact code. Try to understand all the state thing and rendering, it's not that hard. You have to get all this page to quickly get into react : facebook.github.io/react/docs/state-and-lifecycle.html — Nevosis
– Nevosis, Commented Jul 19, 2017 at 10:19

Nevosis · Accepted Answer · 2017-07-19 10:16:42Z

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>

Collectives™ on Stack Overflow

React JS: Modal component not rendering

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related