Как дождаться выполнения асинхронного когда и только после этого передать переменную его дочерний компонент?

Question

[SeventimeSsS]

Родительский компонент выполняет асинхронную функцию и перезаписывет state, затем передает его дочернему компоненту

const [epgDays, setEpgDays] = useState<Array<string>>([]);

const getChannelEpg = async () => {
    try {
      const response = await axios.request({
        method: 'GET',
        url: 'https://...',
        params: {
          id: videoPlayerModel.StreamPlayerModel.ActiveChannel?.our_id,
        },
      });

      const arrTelecast: Array<TEpg | string> = [];
      const arrDays: Array<string> = [];

      await response.data.epg.map((item: TEpgItem) => {
        arrTelecast.push(item.title);
        arrDays.push(item.title);
        item.data.map((elem: TEpg) => {
          arrTelecast.push(elem);
        });
      });

      playlistModel.Channels[0].epgForWeek = arrTelecast;

      setEpgTelecast(arrTelecast);
      setEpgDays(arrDays);
    } catch (err) {
      console.error('error epg');
    }
  };

  getChannelEpg();

 return (
    <S.EpgContainer>
      {epgDays.length != 0 ? <EpgDay epgDays={epgDays}/> : null}
    </S.EpgContainer>
  );

В дочернем элементе я пытаюсь вывести значения записанные в массиве, но он приходит пустой.

Как мне дождаться выполнения асинхронного кода и только после этого передать его в props,

Comments

[Вадим]

Для этого делают лоадеры.
Изначально лоадер показывается, когда запрос завершается - лоадер сменяется на компонент в который переданы данные из запроса.