How can we display datas according to button clicks in mainpage ....if many filteration method is applied in ReactJs?

Question

When someone Logs in first of all i want to show the currentUserData in the table body . then when clicks on " Today " button, table should be show the " todayData "....when clicks on " This Week " button, table should be show the " thisWeekData "....etc....

references

..................

userData = all datas available in database,

todayData = filtered data from "userData" with current day (function calls after clicking "Today" button from main page),

thisWeekData = filtered data from "userData" with current week (function calls after clicking "This Week" button from main page)

thisMonthData = filtered data from "userData" with current Month (function calls after clicking "This Month" button from main page),

customData = filtered data from "userData" between dates (function calls after clicking "Custom" button from main page),

dropDownUserData = filtered data from "userData" (function calls after clicking any user from Drop down menu "Today" available in main page),

currentUserData = displaying datas of users by deviding into pages

      {

        // 👇️checking whether any current day datas available or not...if, displaying the datas
         todayData.length > 0 ?

          todayData.map((user, id) =>
            <tr key={id} className='table-row'>
              <td className='table-item'>{user.date}</td>
              <td className='table-item'>{user.from}</td>
              <td className='table-item'>{user.to}</td>
              <td className='table-item'>{user.duration}</td>
              <td className='table-item'>{user.hangup}</td>
              <td className='table-item'>{user.action}</td>
            </tr>)

          :

          // 👇️checking whether any this week datas available or not...if, displaying the datas
          thisWeekData.length > 0 ?

            thisWeekData.map((user, id) =>
              <tr key={id} className='table-row'>
                <td className='table-item'>{user.date}</td>
                <td className='table-item'>{user.from}</td>
                <td className='table-item'>{user.to}</td>
                <td className='table-item'>{user.duration}</td>
                <td className='table-item'>{user.hangup}</td>
                <td className='table-item'>{user.action}</td>
              </tr>
            )

            :

            // 👇️checking whether any this month datas available or not...if, displaying the datas
            thisMonthData.length > 0 ?

              thisMonthData.map((user, id) =>
                <tr key={id} className='table-row'>
                  <td className='table-item'>{user.date}</td>
                  <td className='table-item'>{user.from}</td>
                  <td className='table-item'>{user.to}</td>
                  <td className='table-item'>{user.duration}</td>
                  <td className='table-item'>{user.hangup}</td>
                  <td className='table-item'>{user.action}</td>
                </tr>
              )

              :

              // 👇️checking whether any custom selected datas available or not...if, displaying the datas
              customData.length > 0 ?

                customData.map((user, id) =>
                  <tr key={id} className='table-row'>
                    <td className='table-item'>{user.date}</td>
                    <td className='table-item'>{user.from}</td>
                    <td className='table-item'>{user.to}</td>
                    <td className='table-item'>{user.duration}</td>
                    <td className='table-item'>{user.hangup}</td>
                    <td className='table-item'>{user.action}</td>
                  </tr>
                )

                :

                // 👇️checking whether any datas related to selected user from drop down is available or not...if, displaying the datas
                dropDownUserData ?

                  dropDownUserData.map((user, id) =>
                    <tr key={id} className='table-row'>
                      <td className='table-item'>{user.date}</td>
                      <td className='table-item'>{user.from}</td>
                      <td className='table-item'>{user.to}</td>
                      <td className='table-item'>{user.duration}</td>
                      <td className='table-item'>{user.hangup}</td>
                      <td className='table-item'>{user.action}</td>
                    </tr>
                  )

                  :

                  // 👇️checking whether any datas available in database or not...if, displaying the datas
                  currentUserData && currentUserData.length > 0 ?
                    // 👇️Search details

                    currentUserData.filter((value) => {
                      if (searchInput === '') {
                        return value
                      }

                      else if (value.name.toLowerCase().includes(searchInput.toLowerCase())) {
                        return value
                      }
                    })

                      // 👇️Displaying datas on table

                      .map((user, id) =>
                        <tr key={id} className='table-row'>
                          <td className='table-item'>{user.date}</td>
                          <td className='table-item'>{user.from}</td>
                          <td className='table-item'>{user.to}</td>
                          <td className='table-item'>{user.duration}</td>
                          <td className='table-item'>{user.hangup}</td>
                          <td className='table-item'>{user.action}</td>
                        </tr>
                      ) : 'Loading'

      }

    </tbody>

Answer 1

  //👇️ Setting state for showing the required datas when filtering
  const [showUserData, setShowUserData] = useState(false)
  const [showTodayData, setShowTodayData] = useState(false)
  const [showWeekData, setShowWeekData] = useState(false)
  const [showMonthData, setShowMonthData] = useState(false)
  const [showCustomData, setShowCustomData] = useState(false)
  const [showDropDownData, setShowDropDownData] = useState(false)

setstates as true or false as per the requirements in the onClick functions

eg: for Today button click setShowTodayData(true) setShowWeekData(false) setShowDropDownData(false) etc.....

app.js

 {
<tbody className='table-body'>
    
// 👇️Displaying all datas by deviding into pages
    
              {showUserData && currentUserData.filter((value) => {

                if (searchInput === '') {
                  return value
                }
    
                else if (value.name.toLowerCase().includes(searchInput.toLowerCase())) {
                  return value
                }
              })
                .map((user, id) => {
                  return <tr key={id} className='table-row'>
                    <td className='table-item'>{user.date}</td>
                    <td className='table-item'>{user.from}</td>
                    <td className='table-item'>{user.to}</td>
                    <td className='table-item'>{user.duration}</td>
                    <td className='table-item'>{user.hangup}</td>
                    <td className='table-item'>{user.action}</td>
                  </tr>
                })
    
              }
    
// 👇️checking whether any datas related to selected user from drop down is available or not...if, displaying the datas
    
              {showDropDownData && dropDownUserData.map((user, id) =>
                <tr key={id} className='table-row'>
                  <td className='table-item'>{user.date}</td>
                  <td className='table-item'>{user.from}</td>
                  <td className='table-item'>{user.to}</td>
                  <td className='table-item'>{user.duration}</td>
                  <td className='table-item'>{user.hangup}</td>
                  <td className='table-item'>{user.action}</td>
                </tr>)
              }
    
// 👇️checking whether any Today datas available or not...if, displaying the datas
    
              {showTodayData && todayData.map((user, id) =>
                <tr key={id} className='table-row'>
                  <td className='table-item'>{user.date}</td>
                  <td className='table-item'>{user.from}</td>
                  <td className='table-item'>{user.to}</td>
                  <td className='table-item'>{user.duration}</td>
                  <td className='table-item'>{user.hangup}</td>
                  <td className='table-item'>{user.action}</td>
                </tr>)
              }
    
// 👇️checking whether any This week datas available or not...if, displaying the datas
    
              {showWeekData && thisWeekData.map((user, id) =>
                <tr key={id} className='table-row'>
                  <td className='table-item'>{user.date}</td>
                  <td className='table-item'>{user.from}</td>
                  <td className='table-item'>{user.to}</td>
                  <td className='table-item'>{user.duration}</td>
                  <td className='table-item'>{user.hangup}</td>
                  <td className='table-item'>{user.action}</td>
                </tr>)
              }
    
// 👇️checking whether any This month datas available or not...if, displaying the datas
    
              {
                showMonthData && thisMonthData.map((user, id) =>
                  <tr key={id} className='table-row'>
                    <td className='table-item'>{user.date}</td>
                    <td className='table-item'>{user.from}</td>
                    <td className='table-item'>{user.to}</td>
                    <td className='table-item'>{user.duration}</td>
                    <td className='table-item'>{user.hangup}</td>
                    <td className='table-item'>{user.action}</td>
                  </tr>)
              }
    
 // 👇️checking whether any Custom datas available or not...if, displaying the datas
    
              {
                showCustomData && customData.map((user, id) =>
                  <tr key={id} className='table-row'>
                    <td className='table-item'>{user.date}</td>
                    <td className='table-item'>{user.from}</td>
                    <td className='table-item'>{user.to}</td>
                    <td className='table-item'>{user.duration}</td>
                    <td className='table-item'>{user.hangup}</td>
                    <td className='table-item'>{user.action}</td>
                  </tr>)
              }
            </tbody>
}

Answer 2

Create memoized todayData , thisWeekData , and thisMonthData .

const todayData = useMemo(() => {
    ...
},[userData])

const thisWeekData = useMemo(() => {
    ...
},[userData])

const thisMonthData = useMemo(() => {
    ...
},[userData])

Then create a showingData state that would become render reference data

    const [showingData, setShowingData] = useState();

    render (
        ...
        {showingData.map((data) => {
    
        })}
        ...
    )

Finally, at the buttons, assign the data by using setState :

    render (
        ...
        <botton onClick={() => setShowingData(todayData)}>
           Today
        </button>
        <botton onClick={() => setShowingData(thisWeekData)}>
            This Week
        </button>
        <botton onClick={() => setShowingData(thisMonth)}>
            This Month
        </button>
        ...
    )

And the example is as follows:

 function makeUserData() { const daysInMonth = []; const monthDate = moment().startOf('isoWeek'); _.times(monthDate.daysInMonth(), function (n) { const hours = Math.random() * (0 + 12) + 0 const minutes = Math.random() * (0 + 60) + 0 const start = moment(n).set("hour", hours).set("minute", minutes); const end = moment(start).add(Math.random() * (0 + 30) + 0, 'minutes'); daysInMonth.push({ date: monthDate.format('MM/DD/YYYY'), name: monthDate.format('dddd'), from: start.format("HH:mm"), to: end.format("HH:mm"), duration: `${parseInt((moment(end) - moment(start))/60000)} minutes` }); monthDate.add(1, 'day'); }); return daysInMonth; } const { useEffect, useState, useMemo } = React; function App() { const [showingData, setShowingData] = useState([]); const today = useMemo(() => moment()); const userData = useMemo(() => { return makeUserData(); },[]); useEffect(() => { setShowingData(userData); }, [userData]); const todayData = useMemo(() => { return userData.filter((data) => data.date === today.format('MM/DD/YYYY')); }, [today, userData]); const thisWeekData = useMemo(() => { const startOfWeek = today.clone().startOf('isoWeek'); const endOfWeek = today.clone().endOf('isoWeek'); return userData.filter((data) => { return (new Date(data.date) >= new Date(startOfWeek) && new Date(data.date) <= new Date(endOfWeek)) }); }, [today, userData]); const thisMonthData = useMemo(() => { const startDate = today.clone().startOf('month'); return userData.filter((data) => new Date(data.date) >= new Date(startDate)); }, [today, userData]); return ( <div> <button onClick={() => setShowingData(userData)}> Current Data </button> <button onClick={() => setShowingData(todayData)}> Today </button> <button onClick={() => setShowingData(thisWeekData)}> This Week </button> <button onClick={() => setShowingData(thisMonthData)}> This Month </button> <table> <thead> <tr> <th>Date</th> <th>Name</th> <th>From</th> <th>To</th> <th>Duration</th> </tr> </thead> <tbody> {showingData.map((data, index) => ( <tr key={index}> <td>{data.date}</td> <td>{data.name}</td> <td>{data.from}</td> <td>{data.to}</td> <td>{data.duration}</td> </tr> ))} </tbody> </table> </div> ) } ReactDOM.render(<App />, document.querySelector('.react'));

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <div class='react'></div>