0

Necesito ayuda con este error ya intente varias cosas y no he podido resolverlo.

El proyecto es con React, JSX y implemente bootstrap donde intento usar este modal fade pero al llamarlo mediante un boton me manda ese error.

Lei que tal vez es el data-bs-toggle y el data-bs-target pero no logro hacer que se renderice con js.

El error solo se muestra la primera vez que intento abrir el modal, luego cierro el error y me abre el modal de manera normal.

Este es el codigo de una fila de una tabla donde se muestran los resultados de un partido anterior

function FilaUltimosResultados({partido, onSelect, partidoSelected}) {

const isMobile = useMediaQuery('(max-width: 1200px)');

const divStyle = {
    color: "white",
    marginRight: 10,
    marginLeft: isMobile ? 0 : 50
}

const handleDetailsClick = () => {
    onSelect(partido);
}

const formatteDate = formatDate(partido.fecha);

return (
    <div className="text-center fila-ult-results">
        {formatteDate} / {partido.lugar}
        <div className="row align-items-center justify-content-center mt-2">
            <div className="col-3 equipo-local">
                <img className="escudo-ult-resultados img-fluid" src={urlImage + partido.escudo_local} alt="" />
                <span className="d-block d-md-inline mt-2 mt-md-0 ml-md-2">{partido.equipo_local}</span>
            </div>
            <div className="col-3 marcador-ult">{ partido.goles_local } - { partido.goles_visitante }</div>
            <div className="col-3 equipo-visitante">
                <img className="escudo-ult-resultados img-fluid" src={urlImage + partido.escudo_visitante} alt="" />
                <span className="d-block d-md-inline mt-2 mt-md-0 ml-md-2">{partido.equipo_visitante}</span>
            </div>

            {/* trigger modal */}
            <div type="button" className={isMobile ? "col btn" : "btn col-1 button-details" } style={divStyle} data-bs-toggle="modal" href="#modalInfoPlay" onClick={handleDetailsClick}>
                Detalles
                <FormatListBulletedIcon fontSize="medium"/>
            </div>

            {partidoSelected && <ModalPartido partido={partidoSelected}/>}
        </div>
    </div>
);

Y este seria el codigo del Modal donde muestro el resultado y la cronologia del partido concluido.

function ModalPartido({ partido }) {
const eventos = partido.detalles;
const color_estado = partido.estado === 'Victoria' ? 'green' : partido.estado === 'Derrota' ? 'red' : partido.estado === 'Empate' ? 'blue' : 'none';

return (
    <div className="modal fade" id="modalInfoPlay" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="modalInfoPlayLabel" aria-hidden="true" >
        <div className="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div className="modal-content">
                <div className="modal-header">
                    <h1 className="modal-title fs-5" id="modalInfoPlayLabel">Detalles del Partido</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
                </div>

                <div className="modal-body">

                    <div className="row modal-equipos">
                        <div className="col-4">
                            <img className="img-fluid" src={urlImage + partido.escudo_local} alt=""></img>
                            {partido.equipo_local}
                        </div>
                        <div className="col-3 fs-3">
                            <strong>{partido.goles_local} - {partido.goles_visitante}</strong>
                            <br />
                            <strong>VS</strong>
                            <br/>
                            <strong style= {{color: color_estado }} >{partido.estado}</strong>
                        </div>
                        <div className="col-4">
                            <img className="img-fluid" src={urlImage + partido.escudo_visitante} alt=""></img>
                            {partido.equipo_visitante}
                        </div>
                    </div>

                    <Timeline>
                        {eventos.map((evento, index )=> (
                            <TimelinePartido
                                key={index}
                                evento={evento}
                            ></TimelinePartido>
                        ))
                        }
                    </Timeline>
                </div>
            </div>
        </div>
    </div>
);

Este es el error que aparece introducir la descripción de la imagen aquí

1 respuesta 1

0

Sospecho que el problema en sí es que el componente ModalPartido sólo se renderiza cuando partidoSelected no sea un valor nulo, lo que hace que el data-bs-toggle y data-bs-target no encuentren el elemento con el id que asignas, cuando cierras el error ModalPartido ya fue renderizado y entonces funciona.

La idea de bootstrap es que ámbos elementos estén presentes (en términos de React, que ámbos estén renderizados).

Quita la validación de {partidoSelected && <ModalPartido partido={partidoSelected}/>}, ya que como mencioné, el componente siempre debe estar renderizado, bootstrap automáticamente debería desencanedar que el modal abra y lo único que cambia es el contenido que de partidoSelected.

2
  • he quitado la validacion pero al ser null el estado inicial del partido seleccionado manda error ya que no le esta llegando nada al modal para renderizar los detalles, y para resolver esto se me ocurrio llenar primero el array del partidoSeleccionado pero el useEffect solo se ejecuta una vez y no cambia el estado inicial por lo que sigue dando error al leer detalles useEffect(() => { if(ultPartidos.length > 0 && !partidoSeleccionado){ setPartidoSeleccionado(ultPartidos[0]); } }, [ultPartidos]); Commented el 12 jul. a las 16:55
  • Sería más fácil agregar una validación en el componente ModalPartido en donde adentro de <div className="modal-body"> agregues un fragment con la validación partido && <>...tu contenido</> así sólo renderizará siempre y cuando partido no sea null. Commented el 14 jul. a las 20:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.