const { Component, Fragment } = React; const const players = [ { heading: 'Eden Hazard', info: 'Number 10', active: false, content: '

Top Scorer

', img: 'https://as00.epimg.net/futbol/imagenes/2018/10/08/primera/1539035441_764168_1539035481_noticia_normal.jpg' }, { heading: 'David Luiz', info: 'Number 30', active: false, content: '

Center back

', img: 'https://static.independent.co.uk/s3fs-public/thumbnails/image/2017/10/24/18/david-luiz.jpg' }, { heading: 'Cesar Azpilicueta', info: 'Number 28', active: false, content: '

Man marker

', img: 'http://images.performgroup.com/di/library/omnisport/7c/49/cesarazpilicueta-cropped_12xcz4y7g2wl61p6x1l90sdfzy.jpg?t=2031240590' }, { heading: 'Olivier Giroud', info: 'Number 18', active: false, content: '

Front

', img: 'https://www.sunnews.info/ghana-news/wp-content/uploads/2018/05/607270-360f7898f621583c5a5d5946aa4a5a05.jpg' }, { heading: 'Marcos Alonso', info: 'Number 3', active: false, content: '

Wingback

', img: 'https://premierleague-static-files.s3.amazonaws.com/premierleague/photo/2017/08/20/2179a1e2-3f68-494e-8ca3-803c25fe2d33/835858580.jpg' } ] const Info = ({ children }) => (

{children}

) const Heading = ({ children }) => (

{children}

) const Item = ({ heading, info, content, img }) => (

{info} {heading}

) class App extends Component { constructor(props) { super(props) this.state = { players = players } } render () { return (

Chelsea Players 2019

{this.state.players.map((player, i) => ( ))}

); } } ReactDOM.render(, document.getElementById("root"));