Create Date list bar (horizontal list) in React/React Native with moment library

sometimes you may need create horizontal date list to show to user..and block required dates. i had to create date bar in my work place. so this is how i solved that using moment library .

import moment from "moment";

//run function in component did mount..
 setInitialDate() {
        const tomorrowDate = moment().add(1, 'days').format("YYYY-MM-DD");
        const todayDate = moment().format("YYYY-MM-DD");
        const todayName = moment().format('dddd');


        //TODO: get blocked dates from backend
        const blockedDays =['2020-06-04','2020-06-05','2020-06-06','2020-06-07'];
        


        let dateList = [];
        
        //if need to remove weekend day you can add like this
         //this code part using to for set 'today' date
        if ((!(todayName == 'Sunday' || todayName == 'Saturday')) && moment().isBefore(moment("17:00", 'HH:mm'))) {
            if (!blockedDays.includes(todayDate)) {
                dateList.push({ item: moment() }); 
            }

        }


        for (i = 1; i < 12; i++) {    //12 is limit. it can change to any positive int number

            const dates = { item: moment().add(i, 'days') };  
            const tmpFormated = dates.item.format('YYYY-MM-DD');
            const dayname = dates.item.format('dddd');
    

               //remove weekend days and blocked days
            if (dayname == 'Sunday' || dayname == 'Saturday'  || blockedDays.includes(tmpFormated)) {
                continue;
            }

            
            dateList.push(dates);
        }

        this.setState({ selectedDate: dateList[0].item.format("YYYY-MM-DD"), todayDate, tomorrowDate,dateList }, () => {
           //add any functions if need to run after data set to state
        });
    }


now dates are successfully stored in state.. now we need to view it in horizontal list 
here is the function to render it.(PS: i did this on react native ui/ you can easily convert it to reactJs


 showDateHeader() {

        const { tomorrowDate, todayDate, selectedDate ,dateList} = this.state;


        return (
            <View> //<div> in ract

                <ScrollView horizontal={true} //you can use suitable alternative in reactJs , i recommend slick carousel in reactJs
                showsHorizontalScrollIndicator={false}
                
                >
                    <View style={styles.container}>

                        {dateList.map(({ item }, i) => {
                            const fromated = item.format('YYYY-MM-DD');
                            let dateName = (todayDate == fromated) ? "Today" : (tomorrowDate == fromated) ? 'Tomorrow' : item.format('DD MMM');

                            return (
                                <TouchableOpacity
                                onPress={() => {
                                    this.ClickDay(fromated); ///Click day function will receive formatted date
                                }}
                                 key={i + "key"}
                                >
                                
                               <View
                                   
                                    style={[styles.container1, (selectedDate == fromated) ? styles.clickedContainer : {}]}>
                                   
                                        <Text>
                                            {dateName.toLocaleUpperCase()}
                                        </Text>
                                    
                                </View>
                            </TouchableOpacity>
                            )

                        })
                        }
                    </View>
                </ScrollView>
            </View>
        );
    }

thank you!.. please comment any of ideas and suggestions