как визуализировать реагирующие компоненты на основе временных меток

Question

У меня есть приложение реагирования (пользовательский интерфейс) с пружинным бэкэндом. Я хочу отображать компоненты на основе трех временных меток, а именно (последние 24 часа, последние 7 дней, последний месяц). Как я могу условно визуализировать и повторно использовать мои компоненты. Я использовал материал-стол и карты. Я хочу изменить значения этих карт и таблицы на основе отметки времени. Любая помощь по этому поводу будет принята с благодарностью.

Код реагирования: -

import React from 'react';
import MaterialTable, {MTableRow} from 'material-table';
//import Icons from '@material-ui/icons'
import { SearchInput } from 'components';
import AddBox from '@material-ui/icons/AddBox';
import ArrowUpward from '@material-ui/icons/ArrowUpward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

class BasicSearch extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          items : [],
          data1 : [],
          time : [24,48,72],
          isLoaded : false  
      }

    }

    componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then((json) => {
          this.setState({ items : json}); 
          console.log("Json = ", json)
          console.log("Basic Search Items = ", this.state.items);
      })
    }



    render() {

      let {items, data1, time} = this.state;
      console.log("Type of items = ", typeof(items));

      if(time.length === 3) {
        return (
            <MaterialTable 
                title="Basic Search Preview"
                icons={{
                    Check: Check,
                    DetailPanel: ChevronRight,
                    Export: SaveAlt,
                    Filter: FilterList,
                    FirstPage: FirstPage,
                    LastPage: LastPage,
                    NextPage: ChevronRight,
                    PreviousPage: ChevronLeft,
                    Search: Search,
                    ThirdStateCheck: Remove,
                }}                
                columns={[
                    { title: 'User ID', field: 'userId', 
                },
                    { title: 'ID', field: 'id' },
                    { title: 'Title', field: 'title' },
                    { title: 'Body', field: 'body' }
                ]}
                data= {items}
                options={{
                    searching: true,
                    sorting: true
                }}


            />             
      )
    }

    else {
        return(
            <MaterialTable 
                title="Basic Search Preview"
                columns={[
                    { title: 'User ID', field: 'userId', 
                },
                    { title: 'ID', field: 'id' },
                    { title: 'Title', field: 'title' }
                ]}
                data= {items}
                options={{
                    searching: true,
                    sorting: true,
                    exportButton: true

                }}

            />             
        )
    }

    }
  }

  export default BasicSearch;