I have the below component file for a calendar button:
import { html } from '../../../web_modules/htm/react.js';
export default ({ buttons }) => {
return buttons.map(val => {
let outDateclassName = false;
let isSelected = '';
if (val.flag !== 'currentMonth') {
outDateclassName = 'outside-month';
}
if (val.isSelected) {
isSelected = 'day-selected';
}
return html`
<button
className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}'
type='button'
aria-label='${val.value}'
aria-selected='false'
disabled='${val.dateDisabled}'
tabIndex='-1'
>
<span className='button__children'>${val.value}</span>
</button>
`;
});
};
When I add dispatch
to the page as shown below:
import { html } from '../../../web_modules/htm/react.js';
import { DispatchContext } from '../../../../context/index.js';
import { useContext } from '../../../../../web_modules/react.js';
export default ({ buttons }) => {
const dispatch = useContext(DispatchContext);
return buttons.map(val => {
let outDateclassName = false;
let isSelected = '';
if (val.flag !== 'currentMonth') {
outDateclassName = 'outside-month';
}
if (val.isSelected) {
isSelected = 'day-selected';
}
// isSelected = val.value;
return html`
<button
className='button button--28 datepicker__day ${outDateclassName} ${isSelected} ${val.circleStart} ${val.circleEnd}'
type='button'
aria-label='${val.value}'
aria-selected='false'
disabled='${val.dateDisabled}'
tabIndex='-1'
onClick=${() => { dispatch({ type: 'TIMEINTERVAL', dateRange: [1, 10, 14] }); }}
>
<span className='button__children'>${val.value}</span>
</button>
`;
});
};
I get the below error with the above code:
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
How to use Dispatch
in this case?