Array.map is not rendering in Reat Native Function Component

Question

I'm trying to render components with a loop. What I did was to use array.map inside a JSX return block of the function component. The component is to render each individual dates contained in the list called 'mountDates'. But it is not rendering the items. Here is my code:

import React, {useEffect} from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {globalStyles} from '../../styles/global';
import AgendaItem from './agendaItem';

export default function Agenda({onDayChange, startDate, endDate}) {
  const mountDates = [];
  useEffect(() => {
    const getDates = (startDate, endDate) => {
      let currentDate = startDate;
      console.log(startDate, endDate);
      while (currentDate.getTime() <= endDate.getTime()) {
        mountDates.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
      }
    };
    getDates(startDate, endDate);
  }, []);

  return (
    <View style={styles.container}>
      {mountDates.map((date, i) => {
        return <AgendaItem key={i.toString()} date={date} />;
      })}
    </View>
  );
}

To be honest I would use useCase in this situation for mountDates, I know since you are using useEffect it should be called once, but if this gets any bigger this will cause unexpected issues, In gerenal, things you show in the UI would be better of with useState, beside the fact that it would probaby solve your issue here, just console log mountDates before the return — Shai
– Shai, Commented Aug 22, 2021 at 5:46
You really should read React Docs, your code won't trigger render. Also your code makes more sense if you pass the mountDates as a prop. — Dennis Vash
– Dennis Vash, Commented Aug 22, 2021 at 5:49

Rahul · Accepted Answer · 2021-08-22 05:56:26Z

1

Simply use React.useState. which will trigger re-render when all data is set.

import {View, Text, StyleSheet} from 'react-native';
import {globalStyles} from '../../styles/global';
import AgendaItem from './agendaItem';

export default function Agenda({onDayChange, startDate, endDate}) {

  const [mountDates, setMountDates] = React.useState([]);


  useEffect(() => {
    const tempMountDates = [];
    const getDates = (startDate, endDate) => {
      let currentDate = startDate;
      console.log(startDate, endDate);
      while (currentDate.getTime() <= endDate.getTime()) {
        tempMountDates.push(new Date(currentDate));
        currentDate.setDate(currentDate.getDate() + 1);
      }
    };
    getDates(startDate, endDate);
    setMountDates();

  }, []);

  return (
    <View style={styles.container}>
      {mountDates.map((date, i) => {
        return <AgendaItem key={i.toString()} date={date} />;
      })}
    </View>
  );
}

answered Aug 22, 2021 at 5:56

Rahul

5,9147 gold badges44 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dennis Vash Over a year ago

You are missing props at dep array, [startDate, endDate], also you should set the state: setMountDates(tempMountDates). Although the code will work it poorly designed, I think the useEffect's logic should move to parent component or at least rewrite in immutable manner (not using .push)

Collectives™ on Stack Overflow

Array.map is not rendering in Reat Native Function Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related