Event firing twice react stateless component - reactjs

Question

I have created two components one Stateful(CurrentProjects) and other stateless(PopUpPanel). In the stateless component I had used Office UI Fabric react component Panel.
Panel has a property OnDismiss which triggers when close icon on the panel is clicked. I am passing function as property through CurrentProject component to PopUpPanel component. But when I click on close icon, the function on CurrentProject component is getting fired twice.
So my question is why it is calling it twice. My code is as below
CurrentProjects Component
import * as React from 'react';
import {
DocumentCard,
DocumentCardActions,
DocumentCardActivity,
DocumentCardLocation,
DocumentCardPreview,
DocumentCardTitle,
IDocumentCardPreviewProps,
IDocumentCardActivityProps,
Panel,
PanelType,
Image,
Persona,
IPersonaProps,
PersonaSize
} from 'office-ui-fabric-react';
import styles from './CurrentProjects.module.scss';
import { ICurrentProjectsProps } from './ICurrentProjectsProps';
import { ICurrentProjectsState } from './ICurrentProjectsState';
import { escape, } from '#microsoft/sp-lodash-subset';
import { ImageFit } from 'office-ui-fabric-react/lib/Image';
import { TestImages } from "../../../../common/TestImages";
import { IProject } from '../IProject';
import PopUpPanel from "../PopUpPanel/PopUpPanel";
import IPopUpPanelProps from "../PopUpPanel/IPopUpPanelProps";
const img = require('../../../../images/avatar-kat.png');
export default class CurrentProjects extends React.Component<ICurrentProjectsProps, ICurrentProjectsState> {
public constructor(props:ICurrentProjectsProps){
super(props);
this.state = {
showPanel:false,
currentProject: null
};
this.onDismiss = this.onDismiss.bind(this);
}
private onCardClick(id:number, event:React.SyntheticEvent<HTMLElement>):void{
//console.log("event=>",event.currentTarget);
//console.log("Id=>",id);
//debugger;
this.setState((prevState:ICurrentProjectsState)=>{
const project = this.props.projects.filter(proj=>proj.ID===id)[0];
return {
showPanel: !prevState.showPanel,
currentProject: project
};
});
}
private onDismiss():void{
//debugger;
this.setState((prevState:ICurrentProjectsState)=> {
return {
showPanel: false //!prevState.showPanel
};
});
}
public render(): JSX.Element {
const project:IProject = this.state.currentProject;
const previewProps: IDocumentCardPreviewProps = {
previewImages: [
{
name: 'My Project',
previewImageSrc: TestImages.documentPreview,
imageFit: ImageFit.contain,
width: 250,
height: 100
},
],
};
const element:JSX.Element[] = this.props.projects === undefined ? []: this.props.projects.map((project,index) => {
const style = {
width: project.PercentageComplete + "%",
};
let dueDate: string = "";
if(project.DueDate)
{
const dueDateObj = new Date(project.DueDate.toString());
dueDate = dueDateObj.toLocaleDateString('en-gb',{year: '2-digit', month: 'short', day: 'numeric'});
}
return (
<DocumentCard className={styles.myCard} key={project.ID} onClick={this.onCardClick.bind(this,project.ID)}>
<div className={styles.priorityDiv + " " + styles[this.getProjectPriorityClassName(project.Priority)]}>
<DocumentCardPreview { ...previewProps } />
<div className={styles.projectDetails}>
<DocumentCardTitle
title={project.Client}
shouldTruncate={ false }
showAsSecondaryTitle={true}
/>
<div className={styles.detailsDiv + ' ms-fontSize-mi'}><span className='ms-font-mi'>Title:</span> {project.Title}</div>
<div className={styles.detailsDiv + ' ms-fontSize-mi'}><span className='ms-font-mi'>BU:</span> {project.BusinessUnit}</div>
<div className={styles.detailsDiv + ' ms-fontSize-mi'}><span className='ms-font-mi'>Due Date:</span> {dueDate}</div>
<div className={styles.seperatorDiv}>
{/* <hr/> */}
<div className={styles.progressBarDiv}><div style={style}></div></div>
<span>{project.PercentageComplete}%</span>
</div>
<div className={styles.detailsDiv + ' ms-fontSize-mi'}>{project.RequestType}</div>
</div>
</div>
</DocumentCard>
);
});
const popUpPanelProps:IPopUpPanelProps = {
project: project,
showPanel: this.state.showPanel,
//onDismiss: this.onDismiss
};
return (
<div className={styles.currentProjects}>
{element}
<PopUpPanel {...popUpPanelProps} onDismiss={this.onDismiss} />
</div>
);
}
private getProjectPriorityClassName(priority:string): string {
switch(priority)
{
case "Low" :
return "priorityLow";
case "Medium" :
case "Moderate" :
return "priorityMedium";
case "High" :
return "priorityHigh";
default:
return "";
}
}
private getProgressBarColor(progress:number): string {
if(progress <= 30) {
return "red";
} else if(progress >30 && progress <=70) {
return "orange";
} else if(progress >70) {
return "green";
}
}
}
PopUpPanel Component
import * as React from 'react';
import {
Panel,
PanelType,
Image,
Persona,
IPersonaProps,
PersonaSize
} from 'office-ui-fabric-react';
import styles from '../ProjectCardBoard/CurrentProjects.module.scss';
import IPopUpPanelProps from './IPopUpPanelProps';
import { escape, } from '#microsoft/sp-lodash-subset';
import { ImageFit } from 'office-ui-fabric-react/lib/Image';
import { TestImages } from "../../../../common/TestImages";
import { IProject } from '../IProject';
const img = require('../../../../images/avatar-kat.png');
const PopUpPanel: React.SFC<IPopUpPanelProps> = (props:IPopUpPanelProps) => {
if(!props.project)
return null;
const project = props.project;
// const onDismiss = ()=> {
// this.props.onDismiss();
// };
return (<Panel
isOpen={ props.showPanel }
type={ PanelType.smallFluid }
onDismiss={ props.onDismiss }>
<div className={styles.ProjectDetailsPanel + " ms-Grid"}>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-md3 ms-lg2 ms-xl2 ms-xxl2 ms-xxxl1">
<Image src={String(img)}
imageFit={ImageFit.cover}
className={styles.ProjectIconDP}
alt='Some Alt' />
</div>
<div className="ms-Grid-col ms-md6 ms-lg8 ms-xl7 ms-xxl8 ms-xxxl9">
<p className="ms-fontSize-s ms-fontWeight-semibold">{project.Client}</p>
<p className="ms-fontSize-mi">{project.Title} <span className="ms-fontSize-s"> | </span> {project.BusinessUnit} <span className="ms-fontSize-s"> | </span>{project.RequestType}</p>
</div>
<div className="ms-Grid-col ms-md3 ms-lg2 ms-xl3 ms-xxl2 ms-xxxl2">
<p>Total Contract Value</p>
<p><strong>{project.TotalContractValue}</strong></p>
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-md12">
<h3>{"Bid Team".toUpperCase()}</h3>
<div className={styles.lineSeperator}></div>
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-mdPush5 ms-md2 ms-lg2 ms-xl1 ms-textAlignCenter">
<div className={styles.peopleHeaderDiv}>
<h3 className={styles.peopleHeading}>{"Core Team".toUpperCase()}</h3>
</div>
{project.CoreTeam && project.CoreTeam.map((member)=>{
const personaProps:IPersonaProps = {
imageUrl: member.ImgSrc,
imageInitials: member.Title.split(" ").reduce((prevVal,currentVal,index)=>{
return prevVal += currentVal.charAt(0);
},""),
primaryText: member.Title,
secondaryText: member.Designation,
tertiaryText: member.PhoneNo,
size:PersonaSize.size72
};
return <Persona {...personaProps} />;
})}
<div className={styles.peopleHeaderDiv}>
<h3 className={styles.peopleHeading}>{"Contributors".toUpperCase()}</h3>
</div>
{project.Contributors && project.Contributors.map((member)=>{
const personaProps:IPersonaProps = {
imageUrl: member.ImgSrc,
imageInitials: member.Title.split(" ").reduce((prevVal,currentVal,index)=>{
return prevVal += currentVal.charAt(0);
},""),
primaryText: member.Title,
secondaryText: member.Designation,
tertiaryText: member.PhoneNo,
size:PersonaSize.size72
};
return <Persona {...personaProps} />;
})}
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-md12">
<h3>{"Reason For Status".toUpperCase()}</h3>
<div className={styles.lineSeperator}></div>
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-md12"
dangerouslySetInnerHTML={{__html:project.ReasonForStatus}} />
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-md12">
<h3>{"Win Strategy".toUpperCase()}</h3>
<div className={styles.lineSeperator}></div>
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-md12"
dangerouslySetInnerHTML={{__html:project.WinStrategy}} />
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-md12">
<h3>{"Key Actions".toUpperCase()}</h3>
<div className={styles.lineSeperator}></div>
</div>
</div>
<div className="ms-Grid-row">
<div className="ms-Grid-col ms-sm12 ms-md12"
dangerouslySetInnerHTML={{__html:project.KeyActionsOrNextSteps}} />
</div>
</div>
</Panel>);
};
export default PopUpPanel;
NOTE: If I change line if(!props.project) to if(!props.project || !props.showPanel) in PopupPanel component than event is triggered only once.