Skip to main content
se eliminaron 4 caracteres en el cuerpo
Origen Enlace
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: []
            
        };
        /*thisthis.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;
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;
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;
se eliminaron 32 caracteres en el cuerpo
Origen Enlace
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/*this.toggle = this.toggle.bind(this);;*/
    }

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

     this.setState({ collapse: newStateCollapsednewState });
  }

    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 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;
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) {
    
    var newStateCollapsed = this.state.collapse;
    for (var i = 0; i < newStateCollapsed.length; i++) {
        if(jouer.id === ide){
            newStateCollapsed[i]=false;
        }else{
            newStateCollapsed[i]=true;
        }
    }

     this.setState({ collapse: newStateCollapsed });
  }

    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 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;
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;
se añadieron 334 caracteres en el cuerpo
Origen Enlace
import React, { Component } from 'react';
import '../Assets/css/grayscale.css';
import { Collapse, Button, CardBody, Card } from 'reactstrap';
import { Link } from 'react-router-dom';

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

 toggle(ide) {
    
    var newStateCollapsed = this.setStatestate.collapse;
    for (var i = 0; i < newStateCollapsed.length; i++) { 
 collapse: !this      if(jouer.stateid === ide){
            newStateCollapsed[i]=false;
        }else{
            newStateCollapsed[i]=true;
        }
    }

    this.setState({ collapse: newStateCollapsed });
  }

    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 }new Array(res.players.length);.fill(true)
            });
        })
        .catch(error => {
                console.log('error dude, desolé');
            })


 
    }



    render () {
        const tailleArray = this.state.jouers.length;
        console.log(tailleArraythis.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.captionname} </h5>
                                           <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
                                            <Collapse isOpen={this.state.collapsecollapse[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;
import React, { Component } from 'react';
import '../Assets/css/grayscale.css';
import { Collapse, Button, CardBody, Card } from 'reactstrap';
import { Link } from 'react-router-dom';

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

 toggle() {
    this.setState({ collapse: !this.state.collapse });
  }

    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
                });
            })
            .catch(error => {
                console.log('error dude, desolé');
            })


 
    }



    render () {
        const tailleArray = this.state.jouers.length;
        console.log(tailleArray);
        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>
            { 
                tailleArray>0 ? (
                    
                    <div className="row">
                        {       
                            this.state.jouers.map((p) => {
                                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.caption} </h5>
                                           <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
                                            <Collapse isOpen={this.state.collapse}>
                                              <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>
        );
    }
}

export default Jouers;
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) {
    
    var newStateCollapsed = this.state.collapse;
    for (var i = 0; i < newStateCollapsed.length; i++) { 
        if(jouer.id === ide){
            newStateCollapsed[i]=false;
        }else{
            newStateCollapsed[i]=true;
        }
    }

    this.setState({ collapse: newStateCollapsed });
  }

    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 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;
Origen Enlace
Loading