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>
);