Problema: tengo una función que me realiza varias tarjetas de equipo, para no tener que hacer veinte distintas páginas he decidido crear una componente nueva de react
igual para todos y que me permita así no tener que crear dichas páginas, el problema lo tengo al intentar pasar tanto con Link
de react-rooter-dom
como con la etiqueta button
, ya que quiero pasar una propiedad del state
especifico a la otra componente.
Componente 1 que inicia la componente 2
const equiposJSx = [];
this.state.equipos.forEach((equipo, index) => {
equiposJSx.push(
<div className="card-container" key={this.state.equipos.Equipo}>
<div className="image-container">
<img alt="foto" src={this.state.escudos[index].Link}></img>
</div>
<div className="card-content">
<div className="card-title">
<h3>{equipo.Equipo}</h3>
</div>
</div>
<button
class="btn btn-success"
onClick={() => {
this.setState({ isOpen: true });
this.handleEquipoActual(equipo.Equipo);
window.location.href('/Plantilla');
Plantilla.handleEquipo(this.EquipoActual);
}}
>
ver más
</button>
</div>
);
});
Componente 2
import React, { useState } from "react";
import axios from "axios";
export default class Plantilla extends React.Component {
state = {
loading: true,
Equipo: "",
Jugadores: [],
};
componentDidMount() {}
handleEquipo(string) {
this.setState({
Equipo: string,
});
}
async componentDidMount() {
const url =
"http://localhost:8000/api/Jugadores/?search=" + this.state.Equipo;
console.log(this.state.Equipo);
const response = await axios.get(url);
const data = await response.data;
this.setState({ Jugadores: data });
}