onPressDateHeader does not mark the date I click in the UI

[davide435]

I can't get the date to be marked with the onPressDateHeader props,I recently started using javascript and react native so I would like to understand, thanks.

import React, { Component } from 'react';

import { StyleSheet,View, Text, TouchableOpacity,Image, FlatList } from 'react-native';

import { connect } from 'react-redux';

import * as actions from './agenda_actions';

import Icon from '../node_modules/react-native-vector-icons/MaterialIcons';

import CardView from 'react-native-cardview';

import moment from "moment";

import 'moment/locale/it';

import { Calendar } from 'react-native-big-calendar';

import SwitchSelector from "react-native-switch-selector";

export default class agenda extends Component

{

state = {

    dataNames: [

        {
            id: 1,
            nome: 'David'
        },

        {
            id: 2,
            nome: "Victor"
        },

        {
            id: 3,
            nome: "Lorenz"
        }

    ],
    tipoMenu: "",
    events: [
        {
            title: 'Meeting',
            start: new Date(2020, 1, 11, 10, 0),
            end: new Date(2020, 1, 11, 10, 30),
        },
        {
            title: 'Coffee break',
            start: new Date(2020, 1, 11, 15, 45),
            end: new Date(2020, 1, 11, 16, 30),
        },
    ],
    date: new Date(),
    selectedDate: "",
    markedDates: {}
}
onBackClick() {
    this.props.goBack();
}

FlatListItemSeparator = () => {
    return (
        <View
            style={{
                height: 1,
                width: "100%",
                backgroundColor: "#000",
            }}
        />
    );
}
onPressData(currentdate) {
    newdate = currentdate
}

render() {

    let currentdate = new Date();
    let monthTest = currentdate.getUTCMonth() + 1; //months from 1-12
    let day = currentdate.getUTCDate();
    let yearTest = currentdate.getUTCFullYear();
    let newdate = yearTest + "/" + monthTest + "/" + day;

    return (
        <View style={styles.container}>
            <View style={styles.containerHeader}>
                <TouchableOpacity onPress={this.onBackClick.bind(this)} style={styles.button}>
                    <Icon
                        style={styles.Icons}
                        name="arrow-back-ios"
                        color="#ffffff"
                        size={30}
                    />
                </TouchableOpacity>
                <View style={styles.containerTextHeader}>
                    <Text style={styles.Textheader}>Agenda</Text>
                </View>
            </View>
            <CardView style={styles.headerData}>
                <View style={{ justifyContent: 'center' }}>
                    <Text style={styles.textData}>{newdate}</Text>
                </View>
                <View style={{ width: '80%', justifyContent: 'center', paddingLeft: 90 }}>
                    <SwitchSelector
                        hasPadding
                        textContainerStyle={{ width: 50 }}
                        style={{ width: 100 }}
                        options={[
                            { label: "Day", value: "d" }, //images.feminino = require('./path_to/assets/img/feminino.png')
                            { label: "Week", value: "w" } //images.masculino = require('./path_to/assets/img/masculino.png')
                        ]}
                        initial={0}
                        testID="gender-switch-selector"
                        accessibilityLabel="gender-switch-selector"
                        onPress={value => this.setState({ tipoMenu: value })}
                    />
                </View>
            </CardView>
            <View style={styles.body}>
                {this.state.tipoMenu == 'w' ?
                    <FlatList
                        data={this.state.dataNames}
                        ItemSeparatorComponent={this.FlatListItemSeparator}
                        renderItem={({ item }) =>
                            <View>
                                <TouchableOpacity>
                                    <CardView style={{ backgroundColor: '#455298', width: '25%', alignItems: 'center', justifyContent: 'center' }}>
                                        <Text style={{ marginTop: 20, color: 'white', textAlign: 'center', fontSize: 30 }}>{item.nome}</Text>
                                    </CardView>
                                </TouchableOpacity>
                            </View>
                        }
                        keyExtractor={(item) => item.id}
                    //extraData={selectedId}
                    >
                    </FlatList>
                    :
                    <Calendar
                        swipeEnabled={true}
                        date={newdate}
                        events={this.state.events}
                        height={600}
                        onPressDateHeader={(currentdate => this.onPressData(currentdate, newdate))}
                    />
                }
            </View>
            <View style={styles.footer}>
                <View styles={styles.image}>
                    <Image style={styles.logo} source={require('../images/logoOctobusFooter.png')} />
                </View>
                <View styles={styles.image}>
                    <Image style={styles.logo} source={require('../images/Logo_OCTOBUS.png')} />
                </View>
            </View>
        </View>

    )
}

} @acro5piano

[acro5piano]

Please rewrite your code to be readable for me.