import React from 'react' ; import { Table } from 'react-bootstrap' ; import { Link } from 'react-router-dom' ; import ShoppingListRemover from './ShoppingListRemover' ; type ShoppingListsProps = { lists : any [ ] ; onRemoveSuccess : ( ... args : any [ ] ) => any ; } ; const ShoppingLists = ( { lists , onRemoveSuccess } ) => { return ( < div > < Table responsive > < thead > < tr > < th > # < /th> < th > Shopping List < /th> < th className = "example-table-action" > Action < /th> < /tr> < /thead> < tbody > { lists . map ( ( { id , name } , index ) => ( < tr key = { id } > < td > { index + 1 } < /td> < td > < Link to = { `/${ id }` } > { name } < /Link> < /td> < td className = "example-table-action" > < ShoppingListRemover shoppingListId = { id } onRemoveSuccess = { onRemoveSuccess } / > < /td> < /tr>))} < /tbody> < /Table> < /div>); } ; export default ShoppingLists ;