Remove data/memory for particular week Day of array if data(Time) is empty for that index from double map

Anuj Todankar 0
Viewed 17

I am making Learn Reminder App for that I am mapping a static array of weeks and inside that map i am mapping another array(reminderData) which i am fetching it from database to compare both array and if the weekDay matches with the Parent Map that is weeks array than I am just showing the time. But due to my turnary Operator condition my data is mixed with Set Time and data present in database. How do I optimize my code to show time for that particular week if present in db or show set time instead.

App Screenshot


    const weeks = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];




<View style={{ flex: 1, borderWidth: 1, borderRadius: 10, marginTop: "3%", height: "50%" }}>
                    {
                        weeks.length > 0 &&
                        weeks.map((week, index) => (
                            <View key={index}>
                                <View style={{ flexDirection: 'row', marginHorizontal: "5%", flexDirection: 'row' }}>

                                    <Text style={{ flex: 1, paddingTop: 13, color: 'black', fontSize: 18, fontWeight: 'bold' }} >{week}</Text>


                                    {
                                        reminderData.map((data, index2) => (
                                            <React.Fragment key={index2}>
                                                {
                                                    (data.WeekDay == week) ?
                                                        <Pressable onPress={() => updateTimePicker(data, index)}>

                                                            <Text onPress={() => updateTimePicker(data, index)} key={index} style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18, }}>{moment(data.Time).format('hh:mm A')}</Text>

                                                        </Pressable> :

                                                        <Pressable onPress={() => openTimePicker(week, index)}>
                                                            <Text onPress={() => openTimePicker(week, index)} key={index} style={{ justifyContent: 'flex-end', paddingTop: 13, color: 'black', fontSize: 18, }}>Set Time</Text>
                                                        </Pressable>
                                                }
                               </React.Fragment>
                                        ))
                                    }
                                </View>

                                <View
                                    style={{
                                        marginTop: 8,
                                        borderBottomColor: 'black',
                                        borderBottomWidth: StyleSheet.hairlineWidth,
                                    }}
                                />
                            </View>
                        ))
                    }
                </View>
expo react-native reactjs
1 Answers

try this:

import  React,{useState,useEffect} from 'react';
import moment from 'moment'
import { Text, View, StyleSheet,FlatList,Pressable,Image } from 'react-native';



const WeekComponent = ({ week,reminderData }) => {
  const [data,setData]=useState({})
  useEffect(()=>{
    const foundData=reminderData.find(data=>data.weekDay ===week) //you can use filter if you want to return all data that have weekDay===week 
    setData(foundData) 
  },[reminderData,week])
  

  return (
    <View>
      <View style={{ flexDirection: 'row', marginHorizontal: "5%", flexDirection: 'row' }}>
        <Text style={{ flex: 1, paddingTop: 13, color: 'black',
                       fontSize: 18, fontWeight: 'bold' }} >
            {week}
        </Text>
        {data ? (
          <Pressable onPress={() => updateTimePicker(data)}>
              <Text onPress={() => updateTimePicker(data)}
                    style={{ justifyContent: 'flex-end', paddingTop: 13, 
                              color: 'black',    fontSize: 18, }}>
              {moment(data?.Time).format('hh:mm A')}
              </Text>

          </Pressable>
        ):(
          <Pressable onPress={() => openTimePicker(week)}>
              <Text onPress={() => openTimePicker(week)}
                    style={{ justifyContent: 'flex-end', paddingTop: 13, 
                            color: 'black', fontSize: 18, }}>
                 Set Time
              </Text>
          </Pressable>
        )}
      </View>
    </View>
  );
};

export default function App() {
  const weeks = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday","Sunday"];
   const reminderData=[{weekDay:'',time:''},{weekDay:'',time:''},{weekDay:'',time:''}]
  return (
    <View >
     <FlatList 
        data={weeks} 
        renderItem={({ item }) => <WeekComponent week={item} reminderData={reminderData}/> }
       // keyExtractor={(item) => item.id}

      />
    </View>
  );
}
navas0
Related