Unexpected token, expected in onConfirm in react native

Question

I'm trying to implement react-native-modal-datetime-picker in my app

props

export default class App extends React.Component {  
constructor(props) {
    super(props);
    this.state = {
      cdate: '',
     setDate: '',
     isVisible: false,
     setVisible: false
    };
  }  

Source Code

import React, { Component } from "react";
    import {
      View,
      ScrollView,
      DatePickerIOS,
      TouchableOpacity,
      Text,
      TextInput,
      Button,
      StyleSheet
    } from "react-native";
    import RBSheet from "react-native-raw-bottom-sheet";
    import data from "./static.json";

import DateTimePicker from 'react-native-modal-datetime-picker'; 


export default class App extends React.Component {

const { cdate, isVisible, setDate, setVisible } = this.state;

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textTitle}>REACT NATIVE RAW BOTTOMSHEET</Text>
        <View style={styles.buttonContainer}>

          <TouchableOpacity onPress={() => this.Scrollable.open()} style={styles.button}>
            <Text style={styles.buttonTitle}>SCROLLABLE</Text>
          </TouchableOpacity>     
        </View>

        {/* Grid Menu */}
        <RBSheet
          ref={ref => {
            this.Scrollable = ref;
          }}
          closeOnDragDown
          customStyles={{
            container: {
              borderTopLeftRadius: 10,
              borderTopRightRadius: 10
            }
          }}
        >
          <ScrollView>
            <View style={styles.gridContainer}>
             <DateTimePicker
  mode="time"
  isVisible={isVisible}
  cdate={cdate}
  onConfirm={cdate => {
    setDate(cdate.toTimeString());
    setVisible(false);
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>
            </View>

          </ScrollView>
        </RBSheet>

      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  },
  textTitle: {
    fontSize: 20,
    marginTop: 120
  },
  buttonContainer: {
    alignItems: "center",
    marginTop: 50
  },
  button: {
    width: 150,
    backgroundColor: "#4EB151",
    paddingVertical: 10,
    alignItems: "center",
    borderRadius: 3,
    margin: 10
  },

});

This is the error i'm getting

This is how it should work

*****updated*****

i'm getting the error " SyntaxError:\App.js: Unexpected token (21:6)

19 | export default class App extends React.Component { 20 |

21 | const { cdate, isVisible, setDate, setVisible } = this.state; | ^ 22 | 23 | render() { 24 | return ( at App.js:21:6 " can you help

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

Answer 1

Try this:

const { cdate, isVisible, setDate, setVisible } = this.state;

<DateTimePicker
  mode="time"
  isVisible={isVisible}
  cdate={cdate}
  onConfirm={cdate => {
    setDate(cdate.toTimeString());
    setVisible(false);
  }}
  onCancel={() => this.setState({ setVisible: false })}
/>