title: Reactjs does not show records on Bootstrap Modal View popup
body: <p>The Reactjs code below works fine by showing users records.  </p>
  
  <p>Now I want to display each records on a Bootstrap Modal when ever the View Button is clicked but the Modal is showing empty records</p>
  
  <p>I have already integrated Bootstrap Modal and below is what I have coded to help display records on the modal but with no luck</p>
  
  <p>// Display Data in a Modal when View button is Clicked</p>
  
  <pre><code>viewData() {
    this.see=this.state.rec;
  alert(this.see);
  
   }
  </code></pre>
  
  <p>Is there any other way out.</p>
  
  <p>here is the screenshot showing empty records on the modal view
  <a href="https://i.stack.imgur.com/JBXr8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JBXr8.png" alt="enter image description here"></a></p>
  
  <p>Here is the entire code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
  
     &lt;/head&gt;
     &lt;body&gt;
  
  
  &lt;style&gt;
  
  .pic{
  background:blue; color:white;}
  &lt;/style&gt;
  
  
  &lt;script src="build/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="build/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;script src="build/browser.min.js"&gt;&lt;/script&gt;
  &lt;script src="build/jquery.min.js"&gt;&lt;/script&gt;
  
  
  
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
    &lt;div class="modal" id="myModal"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
  
          &lt;!-- Modal Header --&gt;
          &lt;div class="modal-header"&gt;
            &lt;h4 class="modal-title"&gt;Show Records in Modal&lt;/h4&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- Modal body --&gt;
          &lt;div class="modal-body"&gt;
  
  
  
  Name: {this.see.name}&lt;br&gt;
  Age:  {this.see.age}&lt;br&gt;
          &lt;/div&gt;
  
          &lt;!-- Modal footer --&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div id="app"&gt;&lt;/div&gt;
  
  &lt;script type="text/babel"&gt;
  
  
  
  
  class Application extends React.Component {
   constructor(props) {
     super(props)
  
     this.state = {rec : [
       { "name" : "Tony", "Age" : "18"},
       { "name" : "John", "Age" : "21" },
       { "name" : "Luke", "Age" : "78" },
       { "name" : "Mark", "Age" : "90" },
       { "name" : "Jame", "Age" : "87" },
       { "name" : "Franco", "Age" : "34" },
       { "name" : "Franco", "Age" : "34" },
       { "name" : "Biggard", "Age" : "19" },
       { "name" : "tom", "Age" : "89" },
     ],    
     limit : 20
  };
     this.viewData = this.viewData.bind(this);
  
  
   }
  
  
  
  // Display Data in a Modal when View button is Clicked
  
  viewData() {
    this.see=this.state.rec;
  alert(this.see);
  
   }
  
  
  render() {
  
     return &lt;div className="container"&gt;
  
       &lt;div&gt;
         &lt;h3&gt;List of Records&lt;/h3&gt;
         &lt;ul&gt;
           {this.state.rec.map((obj, i) =&gt; 
               &lt;li key={i}&gt;{obj.name} - {obj.Age}     &lt;button type="button" onClick={this.viewData} className="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"&gt;view from Modal&lt;/button&gt;&lt;/li&gt;
           )}
         &lt;/ul&gt;
  
  
  
       &lt;/div&gt;
  
     &lt;/div&gt;;
   }
  }
  
  
  ReactDOM.render(&lt;Application /&gt;, document.getElementById('app'));
  
  
  &lt;/script&gt;
  
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>An updates</strong></p>
  
  <p>Here is my update based on Sir Stundji solutions if am right,
  What I did was to import Modal Class components into Application Components</p>
  
  <p>but it displays error
  <strong>Uncaught ReferenceError: Component is not defined.</strong>
  Any further help will be appreciated...</p>
  
  <p><strong>Application.jsx</strong></p>
  
  <pre><code>import React, { Component, Fragment } from "react";
  //import React from 'react';
  import { Link } from 'react-router-dom';
  
  import Modal from './Modal';
  
  class Application extends React.Component {
  
  
          constructor(props) {
     super(props)
  
     this.state = {rec : [
       { "name" : "Tony", "Age" : "18"},
       { "name" : "John", "Age" : "21" },
       { "name" : "Luke", "Age" : "78" },
       { "name" : "Mark", "Age" : "90" },
       { "name" : "Jame", "Age" : "87" },
       { "name" : "Franco", "Age" : "34" },
       { "name" : "Franco", "Age" : "34" },
       { "name" : "Biggard", "Age" : "19" },
       { "name" : "tom", "Age" : "89" },
     ],    
     limit : 20
  };
     this.viewData = this.viewData.bind(this);
  
  
   }
  
  // Display Data in a Modal when View button is Clicked
  
  viewData() {
    this.see=this.state.rec;
  alert(this.see);
  
   }
  
  
      render() {
          //const { pg1, pgs1 } = this.props;
          return (
  
  &lt;div className="container"&gt;
  
       &lt;div&gt;
         &lt;h3&gt;List of Records&lt;/h3&gt;
         &lt;ul&gt;
           {this.state.rec.map((obj, i) =&gt; 
               &lt;li key={i}&gt;{obj.name} - {obj.Age}     &lt;button type="button" onClick={this.viewData} className="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal"&gt;view from Modal&lt;/button&gt;&lt;/li&gt;
           )}
         &lt;/ul&gt;
  
  
  
       &lt;/div&gt;
  &lt;Modal see={this.see}/&gt; // pass your data as props to Modal component
  
     &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>here is <strong>Modal.jsx</strong></p>
  
  <pre><code>import React from 'react';
  
  
  class Modal extends Component {
      constructor(props) {
          super(props);
      }
  
      render() {
          return (    
    &lt;div class="modal" id="myModal"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h4 class="modal-title"&gt;Show Records in Modal&lt;/h4&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            Name: {this.props.see.name} // get your data from props
            Age:  {this.props.see.age}
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
          );
      }
  }
  </code></pre>