import './App.css';

let data=[
  {name:'Страна',prop1:'18/19',prop2:'19/20',prop3:'20/21',sum:'Сумма'},
  {name:'Англия',prop1:22.6,prop2:18.5,prop3:24.3,sum:92.3},
  {name:'Испания',prop1:19.5,prop2:18.9,prop3:19.5,sum:83.9},
  {name:'Италия',prop1:17.3,prop2:14.9,prop3:16.2,sum:66.9},
  {name:'Германия',prop1:15.2,prop2:18.7,prop3:15.2,sum:64.9},
  {name:'Франция',prop1:10.5,prop2:11.6,prop3:7.9,sum:48.0}
]

let Block=({name="England", prop1='3333', prop2="44444",prop3='5555',sum="99999"})=>
  <tr>
    <td>{name}</td>
     <td>{prop1}</td>
    <td>{prop2}</td>
    <td>{prop3}</td>
    <td>{sum}</td>
  </tr>


let App=()=>
  <div className="App">
      <table className='table'>
          <caption className='cap'>Таблица УЕФА</caption>
          {data.map(item=><Block {...item} />)}
      </table>
    </div>



export default App;