I am not able to render the data with Map function , Here I am Iterating a list of data, What's Wrong with my Map function?? Can anyone help me in this?

import React from 'react'
    import '../TimeandDate/Time.css';
    import TimeData from '../TimeandDate/TimeData';
    
    const Time = () => {
       
       const dataTime = TimeData;
       //console.log(dataTime);
       const chunks = [];
       while (dataTime.length) {
        chunks.push(dataTime.splice(0,3));
      }
         
      return (
        <div className='Main-Section'>
          <div className='First-Section'>Time</div>
          <div className='Second-Section'>
             <div className='date_title'>Wednesday , June 13</div>
              <div className='time_Slots'>
                   {
                     chunks.map((timeslot) =>{
                      return (
                        <div key={timeslot}>{timeslot.map((time) => {
                             return  <p key={time}>{time}</p>
                        })}
                        </div>
                      ) 
                      })}
              </div>
          </div>
        </div>
      )
    }
    
    export default Time

CodePudding user response：

You just spliced your initial array to zero during rerenders. Map function is ok.

const Time = () => {
  const dataTime = useMemo(() => TimeData, []);
  const chunks = useMemo(() => {
    const _chunks = [];
    const tmp = [...dataTime];
    while (tmp.length) {
      _chunks.push(tmp.splice(0, 3));
    }
    console.log(_chunks);
    return _chunks;
  }, [dataTime]);

  return (
    <div className="Main-Section">
      <div className="First-Section">Time</div>
      <div className="Second-Section">
        <div className="date_title">Wednesday , June 13</div>
        <div className="time_Slots">
          {chunks.map((timeslot) => {
            return (
              <div key={timeslot} className="inline">
                {timeslot.map((time) => {
                  return <p key={time}>{time}</p>;
                })}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};