I have a calendar when the user clicks on a day I get an array with objects of all days with available hours (will put an image of the console.log of it)

then in the useEffect I do some work to get the hours of the day clicked and I want to push the value of date.startAt in the hoursArray state.

the problem is : 1- if there is more than one hour in the same day the last hour is the only one to appear on the screen.

import React, { Component, Fragment, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";
import axios from "axios";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight, faChevronLeft, } from "@fortawesome/free-solid-svg-icons";

import "./c-timeSlot.css";
import "./c-modal.css";
// import '../../hanaa.css';

import dolar from '../../../pictures/charge.png';
import visa from '../../../pictures/PngItem_1162717.png';

const TimeSlot = (props) => {

  const navigate = useNavigate();

  console.log('props time slot', props);
  const day = props.day;
  console.log('slot got ittttttt day', day)
  const docId = props.docId;
  const token = props.token;


  const [availableDates, setAvailableDates] = useState([]);
  const hours = [];
  const hours2 = [];
  const [hoursArray, setHoursArray] = useState(hours);
  const [hoursArray2, setHoursArray2] = useState(hours2);

  const year = '2022-07-';
  var currentDateStr = year.concat(day);

  useEffect(() => {
    setHoursArray([]);
    setHoursArray2([]);
    axios.get(`/doctor/${docId}`,
      {
        headers: {
          "token": token
        }
      }
    ).then(res => {
      console.log('doctor available hours', res);
      async function getCalender() {
        await setAvailableDates(res.data.calender);
      }
      getCalender();
      console.log('available dates ', availableDates);
    }).then(() => {
      availableDates.forEach(element => {
        console.log('currenttttttttt date', currentDateStr);
        console.log(' date', element.date);
        async function findHours() {
          if (element.date == currentDateStr) {
            if (element.startAt.includes('am')) {
              await setHoursArray([element.startAt]);
            } else {
              await setHoursArray2([element.startAt]);
              console.log('array fe l b3denn', hoursArray2);
            }
          }
        }
        findHours();

      })
    })
  }, [day]);


  var sessionType;


  return (
    <>
      <div className="c-bigslots">
        <div>
          <div className="c-MorningSlots">Morning Hours</div>
          <div className="c-slots-up">
            {
              hoursArray.map((hour, index) => (

                <Fragment key={index}>
                  <div className='c-slot'
                  >
                    {hour}
                  </div>

                </Fragment>
              ))}
          </div>

        </div>
        <div>
          <div className="c-EveningSlots">Evening Hours</div>
          <div className="c-slots c-slots_evening">
            {
              hoursArray2.map((hour, index) => (

                <Fragment key={index}>
                  <div className='c-slot'
                  >
                    {hour}
                  </div>

                </Fragment>
              ))}
          </div>

        </div>

      </div>
    </>
  );
}

export default TimeSlot;

CodePudding user response：

You can append value to existing array in sate as,

async function findHours() {
          if (element.date == currentDateStr) {
            if (element.startAt.includes('am')) {
              setHoursArray(currentHours => [...currentHours, element.startAt]);
            } else {
              setHoursArray2(currentHours => [...currentHours, element.startAt]);
              console.log('array fe l b3denn', hoursArray2);
            }
          }
        ........