51 lines
1.7 KiB
React
51 lines
1.7 KiB
React
|
import React, { Component } from 'react';
|
||
|
|
import './component-styling.css'
|
||
|
|
|
||
|
|
class Operator extends Component {
|
||
|
|
state ={operator: [
|
||
|
|
|
||
|
|
{name: 'DKK',description:'bus government',link:'www.ddk.com'},
|
||
|
|
{name: 'aftu',description:'bus private',link:'www.aftu.com'},
|
||
|
|
{name: 'taxi bagage',description:'taxi private',link:'www.taxi.com'},
|
||
|
|
{name: 'clando',description:'clando dakar',link:'www.clando.com'},
|
||
|
|
{name: 'taxi halo',description:'taxi dorkat',link:'www.dorkat.com'}
|
||
|
|
|
||
|
|
]};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* once we have the database done instead of writiing the
|
||
|
|
* opera.name ,opera.description and operator.link
|
||
|
|
* we will be using the format :
|
||
|
|
* {opera.name},{opera.description},{opera.link}
|
||
|
|
*/
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div className='grid-item'>
|
||
|
|
<table className="table">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th scope='col'>Name</th>
|
||
|
|
<th scope='col'>Description</th>
|
||
|
|
<th scope='col'>Link/Info</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody className="tbody">
|
||
|
|
{this.state.operator.map(opera =>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td scope='row'>{opera.name}</td>
|
||
|
|
<td scope='row'>{opera.description}</td>
|
||
|
|
<td scope='row'>{opera.link}</td>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Operator;
|