JSFiddle - React, Tailwind, and code Playground

by Vladymyr Shevchuk

JavaScript

const responseArr = {
	meta: {
  	currentPage: 1 // pagination
  },
	data: [
    {
      date: 1577977965339, // timestamp | yy-mm-dd hh-mm
      value: '132$',
      user: {
        avatart: '',
        firstName: '',
        lastName: ''
      }
    },
    {
      date: 1577977965339, // timestamp | yy-mm-dd hh-mm
      value: '132$',
      user: {
        avatart: '',
        firstName: '',
        lastName: ''
      }
    },
    {
      date: 1577977965339, // timestamp | yy-mm-dd hh-mm
      value: '132$',
      user: {
        avatart: '',
        firstName: '',
        lastName: ''
      }
    }
  ]
};


const goodObj = {
	"June 2019": [{label: '1 Jun'}, {label: '2 Jun'}, {label: '3 Jun'}],
	"July 2019": [{label: '28 Jul'}, {label: '29 Jul'}, {label: '30 Jul'}],
  // ...
  "January 2020": [{label: '1 Jan'}, {label: '2 Jan'}, {label: '3 Jan'}]
};

Object.keys(goodObj).forEach(key => {
	console.group('', key);
  
  goodObj[key].forEach(item => {
  	console.log('item', item.label);
  })
  console.groupEnd('', key);
});

// Map([[], []])? 

/* class Component {
  render () {
    return <div>
    {
      renderList();
    }
    </div>
  }
} */

const formatMonth = 'MMM';
// Transform response
const result = responseArr.data.map(item => {
  moment(item.timestamp, formatMonth)
});

const renderList = result.map(item => {
	//... jsx
})