score:1

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

class ProList extends Component {
     constructor(props) {
      super(props);
      this.state = {
         visible: false,
         activeItemData: "",
         items: [
           {
              desc: "this is item 1 "
           },
           {
              desc: "this is item 2"
           }
         ]
       };  
     }

     closeModal() {
       this.setState({
       visible: false
       });
     }


     handleCurrentItem = item => {
         // you can set two properties in setState or you can set visible property in callback also...
        this.setState(
         {
           activeItemData: item.desc,
           visible:true
         },
         // () => this.setState({ visible: true })
        )
     };

     render() { 

         return (

              <div>

                  <ul>
                     { this.state.items.map(item => (
                        <li key={item.desc} onClick={() => this.handleCurrentItem(item)}>
                           {item.desc}
                        </li>
                     ))}
                  </ul>

                 <Modal
                     className="modal"
                     visible={this.state.visible}
                     width="90%"
                     height="90%"
                     effect="fadeInUp"
                     onClickAway={() => this.closeModal()}
                 >

                         <div className="close">
                             <a href="javascript:void(0);" onClick={() => this.closeModal()}>
                                  X
                             </a>
                         </div>
                         <div>
                              <h1>{this.state.activeItemData}</h1>
                         </div>
                 </Modal>
              </div>

         )

     }
}

Related Query

More Query from same tag