React native mapping not returning JSX element

Question

I'm working on a personal project to further my knowledge and I'm trying to create a week calendar view I got the dates and everything working but I can't display the values from the list when I use .map(). I've done countless google searches with little to no luck. The values from the list is printed to the console however so I must be doing something wrong when return elements within the .map() function. Any help would be appreciated

import React, {useEffect} from 'react';
import {View, Text, TouchableOpacity, Image, ScrollView} from 'react-native';
import styles from '../Styling/DailyStyling';
import Back from '../Img/left_arrow.png';
import User from '../Img/profile.png';

let week = [{ID: '', date: '', WeekDay: ''}];

function makeid(length) {
  var result = '';
  var characters =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  var charactersLength = characters.length;

  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

const Daily = ({navigation}) => {
  useEffect(() => {
    Create_Calender();
  }, []);

  const Create_Calender = () => {
    let curr = new Date();
    var days = [
      'Sunday',
      'Monday',
      'Tuesday',
      'Wednesday',
      'Thursday',
      'Friday',
      'Saturday',
    ];

    for (let i = 1; i <= 7; i++) {
      let first = curr.getDate() - curr.getDay() + i;
      var dayName = days[curr.getDay()];
      let day = new Date(curr.setDate(first)).toISOString().slice(0, 10);
      let weekDay = dayName.slice(0, 3);
      let newDate = new Date(day);
      let dayNum = newDate.getDate();
      week.push({ID: makeid(5), date: dayNum, WeekDay: weekDay});
    }
    return week;
  };

  return (
    <View style={styles.parent}>
      <View style={styles.root}>
        <TouchableOpacity
          title="Back"
          style={styles.btnBack}
          onPress={() => navigation.goBack('Dashboard')}>
          <Image source={Back} style={styles.backIcon} />
        </TouchableOpacity>
        <Text style={styles.txtTitle}>Daily</Text>
        <TouchableOpacity style={styles.btnProfile}>
          <Image source={User} style={styles.profileIcon} />
        </TouchableOpacity>
      </View>

      <View style={styles.calender}>
        <ScrollView horizontal={true}>
          <View style={styles.days}>
            {week.map(item => {
              return (
                <View key="{item.ID}">
                  <Text>{item.date}</Text>
                  <Text>{item.WeekDay}</Text>
                </View>
              );
            })}
          </View>
        </ScrollView>
      </View>
    </View>
  );
};

export default Daily;

Answer 1

You are not getting the result because the component is not being updated when week array is generated use useState Hook from React to re-render the component

code:

const Create_Calender = () => {
  const wk = [{ ID: '', date: '', WeekDay: '' }];
  let curr = new Date();
  var days = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
  ];

  for (let i = 1; i <= 7; i++) {
    let first = curr.getDate() - curr.getDay() + i;
    var dayName = days[curr.getDay()];
    let day = new Date(curr.setDate(first)).toISOString().slice(0, 10);
    let weekDay = dayName.slice(0, 3);
    let newDate = new Date(day);
    let dayNum = newDate.getDate();
    wk.push({ ID: makeid(5), date: dayNum, WeekDay: weekDay });
  }
  return wk;
};

function makeid(length) {
  var result = '';
  var characters =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

  var charactersLength = characters.length;

  for (var i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}

const Daily = ({ navigation }) => {
  const [week, setWeek] = useState([]);

  useEffect(() => {
    //generate week array and set in state ones
    const newWeeks = Create_Calender();
    setWeek(newWeeks);
  }, []);

return (//Views)
}