1

Tengo un componente que crea atumaticamente una serie de otros componentes que contienen informacion, esa informacion me gustaria mostrarla dentro de un popover

Estoy utilizando reactstrap para agilizar el proceso, este es el componente

import React, { Component } from 'react';
import '../Assets/css/grayscale.css';
import { Collapse, Button, CardBody, Card } from 'reactstrap';


class Jouers extends Component {
    constructor(props){
        super(props);
        this.state = {
            jouers:[],
            collapse: []

        };
        this.toggle = this.toggle.bind(this);
    }

 toggle(ide) {
    let newState = Object.assign(this.state.collapse)
    for (var i = 0; i < newState.length; i++) {
        if(this.state.jouers[i].id === ide){
            newState[i]=false;
        }else{
            newState[i]=true;
        }
    }
    this.setState({ collapse: newState });
  }

    componentDidMount(){
        console.log(this.props.location.param1);
        fetch(this.props.location.param1, {
            method: 'GET',
            headers: {
                'X-Auth-Token': '3b7136ad76ce4b0cacd7e1b02d50870f',
            }
        })
        .then(res => res.json())
        .then(res => {
            this.setState({
             jouers: res.players,
             collapse: new Array(res.players.length).fill(true)
            });
        })
        .catch(error => {
            console.log('error dude, desolé');
        })
    }



    render () {
        const tailleArray = this.state.jouers.length;
        console.log(this.state.jouers);
        return (
        <div>
            <header className="ligues">
             <div className="intro-body">
                <div className="container">
                  <div className="row">
                    <div className="col-lg-8 mx-auto">
                      <h1 className="brand-heading">Ligues Football</h1>
                      <a href="" className="btn btn-circle js-scroll-trigger">
                        <i className="fa fa-angle-double-down animated"></i>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </header>
            <h1>Jouers Page</h1>
            <div className="container">
            { 
                tailleArray>0 ? (

                    <div className="row">
                        {       
                            this.state.jouers.map((p,i) => {
                                return(
                                    <div className="col-md-3" key={p.id}>
                                        <div className="hello">
                                          <img className="card-img-top" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" alt="Card image cap"/>
                                          <div className="card-body">
                                            <h5 className="card-title black"> {p.name} </h5>
                                           <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
                                            <Collapse isOpen={this.state.collapse[p.id]}>
                                              <Card>
                                                <CardBody className="noir">
                                                Anim pariatur cliche reprehenderit,
                                                 enim eiusmod high life accusamus terry richardson ad squid. Nihil
                                                 anim keffiyeh helvetica, craft beer labore wes anderson cred
                                                 nesciunt sapiente ea proident.
                                                </CardBody>
                                              </Card>
                                            </Collapse>
                                          </div>
                                        </div>
                                    </div>
                                );
                            })
                        }
                    </div>
                ):(
                    <div className="centered"><h1>pas de jouers</h1></div>
                )
            }
            </div>
        </div>
        );
    }
}

export default Jouers;

Pero... cuando hago clic en el boton de uno de los elementos, todos los popovers se abren cuando solo quiero ver uno solo.

He intentado usar la propiedad KEY de la funcion map, pero aun asi sigue haciendo lo mismo

1 respuesta 1

1

Ese es el comportamiento esperado dada tu implementación.

Tu componente Jouers tiene un listado de jouers pero un único booleano que determina si están colapsados o no. Cuando creas el listado de jouers en el render le estas indicando

 <Collapse isOpen={this.state.collapse}>

Es decir, todos los jouers de tu mapping van a tener el elemento Collapse renderizado o no, no tienes manera de discriminar así, estan tomando el booleano unico y compartido.

Lo puedes solucionar simplemente teniendo un array de booleanos para cada jouer de tu lista.

constructor(props){
        super(props);
        this.state = {
            jouers:[],
             collapse: [] // manejamos a nivel de cada jouer

        };
        this.toggle = this.toggle.bind(this);
    }

Cuando montas el componente e inicializas los jouers deberas indicar que todos estan colapsados (estado inicial)

componentDidMount(){
        console.log(this.props.location.param1);
        fetch(this.props.location.param1, {
            method: 'GET',
            headers: {
                'X-Auth-Token': '3b7136ad76ce4b0cacd7e1b02d50870f',
            }
        })
            .then(res => res.json())
            .then(res => {
                this.setState({
                 jouers: res.players
                 collapse: new Array(res.players.length).fill(true);
                });
            })
            .catch(error => {
                console.log('error dude, desolé');
            })
    }

Luego, cuando invocas la funcion toggle, indicarle por parametro cual jouer es:

 toggle(jouerId) {
    let newStateCollapsed = ... this.state.collapse;
    // Recibo en la funcion toggle el id del Jouer a mostrar
    for(let i=0;i<this.state.jouers.length; i++){
        // obtengo el jouer para cada iteracion de la funcion map cuando es invocada, chequeo según el id del jouer (este dato es algun valor que hace unico a tu jouer, puede ser simplemente un valor autoincremental de 0 a el largo del array de jouers
        if(this.state.jouers[i].id === jouerId){
            newStateCollapsed[i] = false; // lo marco como visible 
        }else{
           // los otros se ocultan
            newStateCollapsed[i] = true;
        }

    }

    this.setState({ collapse: newStateCollapsed  }); // Seteo nuevo estado donde el Jouer clickeado no esta colapsado
  }

Para esto cuando haces el mapping debes pasarle algo que identifique al Jouer, en este caso yo le llame Id, pero seria un dato que es parte de tu Jouer y que lo hace unico.

La linea conflictiva pasaria ahora a ser:

<Collapse isOpen={this.state.collapse[p.id}>

Es decir, cada Collapse estará abierto o no según el valor booleano del array.

1
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – Jorgesys
    Commented el 18 jun. 2018 a las 22:49

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.