Modal not showing up react-boostrap

Question

i am using react-boostrap. The code seems to be o, but Modal does not appear. I suspect it appears but i cant see it.

I need to see the modal appear in the center. I am using bootstrap version 3.3 and react-bootstrap 1.0.1

Feel free to see the sandbox

https://codesandbox.io/s/autumn-paper-l4tzj?file=/src/components/Menu.jsx:0-2147

thanks

import React, {Component} from "react";
import {Modal} from "react-bootstrap";



class Menu extends Component {
  state={

    addModalShow:false,

  };

  ModalShow=()=>{
    this.setState({addModalShow:true})
   };

ModalClose=()=>{
 this.setState({addModalShow:false})
};



  stylesList={
  display: 'inline-block',
  background:"#C8C8C8",
  width:'500px',
  height:'50px'

  };


  onhover=(e)=> {
    e.target.style.background = 'red';

  };

  offhover=(e)=> {
    e.target.style.background = '#C8C8C8 ';
  };




  render() {


    return (
<div className="container-fluid">

            {this.Mapping_Type()}



      </div> 
    );

  }

  Mapping_Type (){


    let result_type = this.props.Objs_Type.map(a => a.FoodType);
    let result_menu = this.props.Objs_Type.map(a => a.Menu);
    let result_price=this.props.Objs_Type.map(a=>a.Price);

    let newFoodtype=[];
    let newMenu=[];
    let FoodType_Menu=[];
    let Price_new=[];
    for (let i=0;i<result_type.length; i++){

      let temp1=(<h1> Menu {result_type[i]}</h1>);
      let temp2=result_menu[i].map((item,idx)=>


      <div style={this.stylesList}>
      <ul style={{padding:0}}>
      <li style={{listStyleType:'none'}} key={item.id} 
      className={"listitems"}
      onMouseOver={this.onhover}
      onMouseOut={this.offhover}
      onClick={this.ModalShow}
      > {item} {result_price[i][idx]}  </li>

    <Modal

      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      show={this.state.addModalShow} 
      onHide={this.ModalClose}
    >

        <Modal.Header closeButton>
          <Modal.Title id="contained-modal-title-vcenter">
            Large Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="container">
            Menu Quantity
          </div>
          </Modal.Body>

      </Modal>





     </ul> 

      </div>





)


        FoodType_Menu.push(temp1,temp2);

        }
        return FoodType_Menu
            };





}



export default Menu;**strong text**

Answer 1

Try add a style in modal, setting opacity :

<Modal style={{opacity: 1}} >
    {/* ... */}
</Modal>