A Grid to be used to display Products that are fetched from the remote end by sending a find request

DisplayGrid.js

// src/DisplayGrid.js
import React,{Component} from 'react'
import { Container,Divider,Header,Card,Button } from 'semantic-ui-react';
import {Link} from 'react-router-dom'
import client from './feathers'

export default class DisplayGrid extends Component {
state = {
products:[]
};

componentDidMount(){
   this.fetchFromRemote()
}

fetchFromRemote =()=>client.service('products').find({
              query: {
                    $sort: {
                        price: -1 // sort them by price descending
                      }
                   }
              }).then(
                    res=>this.setState({products:res.data})
               )

render() {
const { products } = this.state;
   return (
   <Container textAlign='center'>
   <Divider section hidden/>
   <Header> Display Grid</Header>
   <Button as={Link} to='/create'>Add New Product </Button>
   <Divider hidden/>
   <Card.Group>
      {products.map(
({id,name,description,price})=> <Card key={id}>
                 <Card.Content>
                     <Card.Header>
                       {name}
                     </Card.Header>              
                     <Card.Description>
                       {description}
                     </Card.Description>
                     <Card.Meta>
                       {price}
                     </Card.Meta>
                  </Card.Content>
            </Card>
)}
   </Card.Group>
   
   </Container>
 );
}

}