cost-layout

rateperiods.map((period) => {
      var filteredCosts = ratecosts.filter((cost) => {
        return cost.rate_period == period.id ;
      });
      if(filteredCosts.length === 0 ){
        return(<p>No Periods for supplier yet</p>)
      }
      return filteredCosts.map((costdata) => {
            return(
              <div className="row">
                <div className="columns small-2 large-2 medium-2">
                  {period-start} - {period.end}
                </div>
                <div className="columns small-2 large-2 medium-2">
                  {costdata.single}
                </div>
                <div className="columns small-2 large-2 medium-2">
                  {costdata.pps}
                </div>
                <div className="columns small-2 large-2 medium-2">
                  {costdata.thirdadu}
                </div>
                <div className="columns small-2 large-2 medium-2">
                  {costdata.child}
                </div>
              </div>
            )
      });
    });