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