AirtimeCard.js

import React from 'react'
import { Input,Card,Statistic,Button } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import WithStockQuantities from './WithStockQuantities'

function AirtimeCard ({card,name,logedIn}){
        
       

        return (
            <WithStockQuantities
        {...{card}} name={name}
        render={
          ({cumulatedQty,amount,}) =>
          
        <Card>
        <Card.Content>
            <Card.Header>{name} ({amount})</Card.Header>
            <Card.Meta />
            <Card.Description>
            <Statistic>
            <Statistic.Label>STOCKED QTY:</Statistic.Label>
            <Statistic.Value>{cumulatedQty}</Statistic.Value>
        </Statistic>
            </Card.Description>
        </Card.Content>
        <Card.Content extra>
        <WithStockQuantities
        key={card.id} {...{card}} name={name}
        render={
          ({increment,handleChange,addStock}) => 
        <Input type='text' action size='small'>
      
      <Input
      name='increment'
      size='small'
      placeholder={logedIn?'increment to stock':'qty to buy'}
      value={increment}
      onChange={handleChange}
      />
      <Button onClick={addStock}>Add</Button>
      </Input>
    }
    />
        </Card.Content>
        </Card>
        }
        />
           
          )
    
} 

AirtimeCard.propTypes={
    name:PropTypes.string.isRequired,
    card:PropTypes.shape({}).isRequired,
    logedIn:PropTypes.bool,
}
AirtimeCard.defaultProps={
    logedIn:true,
}
export default AirtimeCard

AirtimeCardWhereEventChangesAReReflectedInCard.js

import React from 'react'
import { Input,Card,Statistic,Button } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import WithStockQuantities from './WithStockQuantities'

function AirtimeCard ({card,name,logedIn}){
        
       

        return (
            <WithStockQuantities
       {...{card}} name={name}
        render={
          ({cumulatedQty,amount,increment,handleChange,addStock}) =>
          
        <Card>
        <Card.Content>
            <Card.Header>{name} ({amount})</Card.Header>
            <Card.Meta />
            <Card.Description>
            <Statistic>
            <Statistic.Label>STOCKED QTY:</Statistic.Label>
            <Statistic.Value>{cumulatedQty}</Statistic.Value>
        </Statistic>
            </Card.Description>
        </Card.Content>
        <Card.Content extra>
        
        <Input type='text' action size='small'>
      
      <Input
      name='increment'
      size='small'
      placeholder={logedIn?'increment to stock':'qty to buy'}
      value={increment}
      onChange={handleChange}
      />
      <Button onClick={addStock}>Add</Button>
      </Input>
    
        </Card.Content>
        </Card>
        }
        />
           
          )
    
} 

AirtimeCard.propTypes={
    name:PropTypes.string.isRequired,
    card:PropTypes.shape({}).isRequired,
    logedIn:PropTypes.bool,
}
AirtimeCard.defaultProps={
    logedIn:true,
}
export default AirtimeCard

NetworksPage.js

import React from 'react'
import { Grid,Card,Container,Table } from 'semantic-ui-react'
import WithNetworks from './WithNetworks'
import AirtimeCard from './AirtimeCard'
import StockedCardRecord from './StockedCardRecord'

const NetworksPage = () =><WithNetworks
render={({ thenetwork }) => (
  // The render prop gives us the state we need
  // to render whatever we want here.
<Grid columns={2}>
<Grid.Column>
<Container textAlign='center'>
  <Card.Group>
    {
      thenetwork.cards.map(
        card=><AirtimeCard key={card.id} {...{card}} name={thenetwork.name}/>
      )
    }
  </Card.Group>
</Container>
</Grid.Column>
<Grid.Column>
<Table singleLine>
<Table.Header>
  <Table.Row>
    <Table.HeaderCell>Card</Table.HeaderCell>
    <Table.HeaderCell>Prev Qty</Table.HeaderCell>
    <Table.HeaderCell>Prev Amt</Table.HeaderCell>

    <Table.HeaderCell>New Qty</Table.HeaderCell>
    <Table.HeaderCell>New Amt</Table.HeaderCell>

    <Table.HeaderCell>Added Qty</Table.HeaderCell>
    <Table.HeaderCell>Added Amt</Table.HeaderCell>
  </Table.Row>
</Table.Header>



{
  thenetwork.cards.map(
    card=><StockedCardRecord key={card.id} {...{card}} name={thenetwork.name}/>
  )
}
 

</Table>
</Grid.Column>
</Grid>
)}

/>


export default NetworksPage;

StockedCardRecord.js

import React from 'react'
import { Table } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import WithStockQuantities from './WithStockQuantities'

function StockedCardRecord({card,name} ){
       // const {amount,cumulatedQty,increment} =this.props;
       // const{cumulatedQty,increment}=this.state
        
        return (
            <WithStockQuantities
            isTable
           {...{card}} name={name}
            render={
            ({cumulatedQty,amount,increment}) =>
            
            <Table.Row>
            <Table.Cell>{amount}</Table.Cell>
            <Table.Cell>{cumulatedQty-increment}</Table.Cell>
            <Table.Cell>{(cumulatedQty-increment)*amount}</Table.Cell>
            <Table.Cell>{cumulatedQty}</Table.Cell>
            <Table.Cell>{(cumulatedQty)*amount}</Table.Cell>
            <Table.Cell>{increment}</Table.Cell>
            <Table.Cell>{(increment)*amount}</Table.Cell>
            </Table.Row>
            }
            />
          )
          

} 

StockedCardRecord.propTypes={
    name:PropTypes.string.isRequired,
    card:PropTypes.shape({}).isRequired,
}
StockedCardRecord.defaultProps={
  //  logedIn:true,
 // amount:0,
}
export default StockedCardRecord

WithStockQuantities.js

import React,{Component} from 'react'
import PropTypes from 'prop-types'
import {Table} from 'semantic-ui-react'
import client from '../feathers'

class WithStockQuantities extends Component{

    state={
        cumulatedQty:'0',
        increment:'0',
        amount:'0',
    }

    componentDidMount(){
        const {card:{denominationId}}=this.props
        client.service('denominations').get(denominationId).then(
           ({amount})=>this.setState({amount,}) 
        )
    }

    handleChange = (e, { value }) => this.setState({ 
          
        increment: value
        
       })

 addStock = ()=>{
     const {increment}=this.state
    this.setState((prevState)=>({
        cumulatedQty:(parseInt(prevState.cumulatedQty,10)+parseInt(increment,10)).toString()
     }));
 }

    render(){
        const {render,logedIn,name,isTable} =this.props;
        const{cumulatedQty,amount,increment}=this.state
        
        if(isTable )
        return (
            
           <Table.Body>
           {render({logedIn,name,cumulatedQty,amount,increment,handleChange:this.handleChange,addStock:this.addStock})}
          </Table.Body>
          )
          
          return (
            
            <div>
            {render({logedIn,name,cumulatedQty,amount,increment,handleChange:this.handleChange,addStock:this.addStock})}
           </div>
           )
    }
} 

AirtimeCard.propTypes={
    name:PropTypes.string.isRequired,
    card:PropTypes.shape({}).isRequired,
    render:PropTypes.func.isRequired,
    logedIn:PropTypes.bool,
    isTable:PropTypes.bool,
}
AirtimeCard.defaultProps={
    logedIn:true,
    isTable:false,
}
export default WithStockQuantities