2

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

  }

1 respuesta 1

1

Se puede envolver el botón con el componente Link, esto con la finalidad de llamar a las funciones del Componente uno al dar click en el vínculo ver más:

<Link to={`/Plantilla/${equipo.Equipo}`}>
    <button onClick={()=>{
            console.log("function calls...")
    }}>
      Ver más
    </button>
</Link>

Además, se especifica al componente Link que se envÍan parametros en la URL, esto en la propiedad to, en este caso el parámetro equipo.Equipo que es el que se necesita pasar como props al componente Plantilla, este proceso se conoce como Dynamic Routing:

<Link to={`/Plantilla/${equipo.Equipo}`}>

Luego, dentro del mismo Componente 1, en el método return, se tendría que agregar el componente Route que va a renderizar el componente Plantilla (puede que ya lo tengas), ahí se extrae el parámetro que viene en la propiedad to de Link, la parte dinámica de la URL y se configura Plantilla para que reciba la prop equipo:

<Route path="/Plantilla/:equipo" render={({match})=>{
              return <Plantilla equipo={match.params.equipo} />
            }} />

Por favor intenta lo siguiente:

Componente 1

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>
          <div>
            <Link to={`/Plantilla/${equipo.Equipo}`}>
              <button onClick={()=>{
                console.log("function calls...")
                this.setState({ isOpen: true });
                this.handleEquipoActual(equipo.Equipo);
              }}>
              Ver más</button>
            </Link>
          </div>
          
        </div>
    );
  });

return(
        <div className="container">
            <div className="row">
                {noticiasJSX}
            </div>
            <Route path="/Plantilla/:equipo" render={({match})=>{
              return <Plantilla equipo={match.params.equipo} />
            }} />                   
        </div>
    );

Componente 2

class Plantilla extends Component{
    constructor(props){
      super(props);
      this.state = {
        loading: true,
        Equipo: "",
        Jugadores: [],
      }
    }
  render(){
    //aqui esta la prop equipo
    console.log(this.props)
    return (
      <p>Estoy en Plantilla</p>
    )
  }
}

Espero que esta respuesta sea de ayuda.

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.