Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

51
Vistas
ReactJs component not loading properly when using dispatch

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?

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.