how to remove an array object element at a particular time react js-CodePudding

i want to remove the array element if it's arrivalTime is equal to the current time i tried time==traintime5? arrivalarr.pop(): [] but it didn't worked, i also tried array.filter but didn't worked so please any one help me. thankyou

full code

import React, {Component} from 'react'
import {useState} from 'react';

function Home() {

  var today = new Date(),
  time = today.toLocaleTimeString(today.getHours, today.getMinutes);
 const date1 = today.toLocaleDateString(today.getDate);
var traintime1= today.toLocaleTimeString( today.setMinutes(31,0,0));
var traintime2= today.toLocaleTimeString( today.setMinutes(17,0,0));
var traintime3= today.toLocaleTimeString( today.setMinutes(19,0,0));
var traintime4= today.toLocaleTimeString( today.setMinutes(11,0,0));
var traintime5= today.toLocaleTimeString( today.setMinutes(18,0,0));

  
  
  const arrivalarr= [
    {
      TrainName : "train1",
      TrainNo : "1234",
      platformno : "1",
      arrivalTime : traintime1
    },
    {
      TrainName : "train2",
      TrainNo : "1235",
      platformno : "2",
      arrivalTime : traintime2
    },
    {
      TrainName : "train3",
      TrainNo : "1236",
      platformno : "3",
      arrivalTime : traintime3
    },
    {
      TrainName : "train4",
      TrainNo : "1237",
      platformno : "4",
      arrivalTime : traintime4
    },
    {
      TrainName : "train5",
      TrainNo : "1238",
      platformno : "5",
      arrivalTime : traintime5
    }
  ]

and this is my return , in this i wanted ony 4 trains when the time current time reaches any of the above 5 set time.

    <div>
       <div>
        <span> Arrival table </span><br />
       <span>Bangalore  Time  {time}   date  {date1}</span><br />
       train name     trainno   platformno   arrivalTime <br />
        {arrivalarr.map(({TrainName, TrainNo, platformno, arrivalTime})=>(
          
          <p key={TrainName}>  {TrainName}  {TrainNo} {platformno}    {arrivalTime}</p>
          
        ))}
      
        </div> 
    </div>
  )
 
  }


export default Home

CodePudding user response：

You can use Array.filter() method.

arrivalarr.filter((item) => {
  return item.arrivalTime !== time;  
});

CodePudding user response：

You can set a timeout to remove the train from the array, but you can't do calculations with a locale time string. You have no idea how that string will be formatted since it depends on the user's locale, and it doesn't even include the day.

Use an ISO string instead, then you can calculate the amount of time before removing the entry.

const currentTime = Date.now();
const arrivalTime1 = new Date(currentTime   5000).toISOString();
const arrivalTime2 = new Date(currentTime   10000).toISOString();
const arrivalTime3 = new Date(currentTime   15000).toISOString();
const arrivalTime4 = new Date(currentTime   20000).toISOString();
const arrivalTime5 = new Date(currentTime   25000).toISOString();

const arrivalarr = [
  {
    TrainName: 'train1',
    TrainNo: '1234',
    platformno: '1',
    arrivalTime: arrivalTime1,
  },
  {
    TrainName: 'train2',
    TrainNo: '1235',
    platformno: '2',
    arrivalTime: arrivalTime2,
  },
  {
    TrainName: 'train3',
    TrainNo: '1236',
    platformno: '3',
    arrivalTime: arrivalTime3,
  },
  {
    TrainName: 'train4',
    TrainNo: '1237',
    platformno: '4',
    arrivalTime: arrivalTime4,
  },
  {
    TrainName: 'train5',
    TrainNo: '1238',
    platformno: '5',
    arrivalTime: arrivalTime5,
  },
];

  const [arrivals, setArrivals] = useState(arrivalarr);
  useEffect(() => {
    for (const arrival of arrivals) {
      const timeout = new Date(arrival.arrivalTime).getTime() - Date.now();
      setTimeout(
        () => setArrivals((prev) => prev.filter((a) => !Object.is(a, arrival))),
        timeout
      );
    }
  }, []);

Stackblitz: https://stackblitz.com/edit/react-ts-ihyvxp?file=App.tsx