How to add bootstrap moadal in reactJs calendar? - reactjs

Question

I am working in MERN project where i want to add a bootstarp modal in react calendar. i want that, if any any user clicks on any date a modal should popup. but i don't know how to proceed. please suggest me some good way to achieve this.
my code
import React, { useState } from 'react'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css';
import moment from 'moment'
export default function AddMember() {
const [dateState, setDateState] = useState(new Date())
const changeDate = (e) => {
setDateState(e)
}
return (
<>
<div className='container mt-5'>
<div className='row'>
<div className='col-sm-8 col-md-8 col-lg-8'>
<Calendar
value={dateState}
onChange={changeDate}
/>
<p>Current selected date is <b>{moment(dateState).format('MMMM Do YYYY')}</b> </p>
</div>
</div>
</div>
</>
)
}

Answer 1

You can achieve by setting modal state in your changeDate function like this.
import React, { useState } from 'react'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css';
import moment from 'moment'
// import Modal from react-bootrap
import Modal from 'react-bootstrap/Modal';
export default function AddMember() {
const [dateState, setDateState] = useState(new Date())
const [show, setShow] = useState(false)
const handleClose = () => setShow(false)
const handleShow = () => setShow(true)
const changeDate = (e) => {
setDateState(e)
handleShow()
}
return (
<>
<div className='container mt-5'>
<div className='row'>
<div className='col-sm-8 col-md-8 col-lg-8'>
<Calendar
value={dateState}
onChange={changeDate}
/>
<p>Current selected date is <b> {moment(dateState).format('MMMM Do YYYY')}</b> </p>
</div>
</div>
</div>
<Modal show={show} onHide={handleClose}>
// your modal content goes here
</Modal>
</>
)
}
Now whenever user clicks or select a date a modal will popup. Happy coding :-)