What is the best way to set up initial state in react-native-day-picker?

Question

What is the best way to set up initial state in react-native-day-picker?

I have been experimenting with implementing react-native-calendar into my project. Here is the code snippet I am working on:

import React from 'react';
import {Calendar} from 'react-native-day-picker';

const MyCalendar = () => {
    var from = new Date();
    from.setDate(from.getDate() - 16);
    var to = new Date();
    var startDate = new Date();
    startDate.setMonth(startDate.getMonth() + 1);

    return (
        <View style={styles.container}>
            <Calendar
                monthsCount={24}
                startFromMonday={true}
                startDate={startDate}
                selectFrom={from}
                selectTo={to}
                width={350}
                onSelectionChange={(current, previous) => {
                    console.log(current, previous);
                }}
            />
        </View>
    );
};

export default MyCalendar;

However, I encountered a Syntax Error and my Project manager has specific requirements that do not align with the current styling approach as shown below:

class XXX extends XXXX {
    constructor(...) {
    }
    render() { ... }
}

The challenge I am facing is initializing values like from, to, and startDate. How should I address this issue?

typescript react-native

Answer 1

Answer №1

- Remember not to include a semicolon after tags
- Make sure to return the views in `return(...)`
- You are now able to access myCalender from the class

 const MyCalendar = function () {
        var from = new Date();
     from.setDate(from.getDate() - 16);
     var to = new Date();
     var startDate = new Date();
     startDate.setMonth(startDate.getMonth() + 1);
    return(
    <View style={styles.container}>
                <Calendar
                    monthsCount={24}
                    startFormMonday={true}
                    startDate={startDate}
                    selectFrom={from}
                    selectTo={to}
                    width={350}
                    onSelectionChange={(current, previous) => {
                        console.log(current, previous);
                    }}
                />
            </View>
    );
    };

Answer 2

- Remember not to include a semicolon after tags
- Make sure to return the views in `return(...)`
- You are now able to access myCalender from the class

 const MyCalendar = function () {
        var from = new Date();
     from.setDate(from.getDate() - 16);
     var to = new Date();
     var startDate = new Date();
     startDate.setMonth(startDate.getMonth() + 1);
    return(
    <View style={styles.container}>
                <Calendar
                    monthsCount={24}
                    startFormMonday={true}
                    startDate={startDate}
                    selectFrom={from}
                    selectTo={to}
                    width={350}
                    onSelectionChange={(current, previous) => {
                        console.log(current, previous);
                    }}
                />
            </View>
    );
    };

Answer 3

Answer №2

To handle multiple statements in arrow functions, it is necessary to use block body { }.

For more information on function bodies of arrow functions, you can visit the MDN page.

With a concise body, only an expression is required, while an implicit return is automatically added. In contrast, a block body mandates the use of an explicit return statement.

Hence, ensure that you return the View component as the final statement in your MyCalendar.

I have removed the { } for the onSelectionChange of the Calendar component since a concise body suffices for a single line statement.

Some additional fixes:

For variables where the value is not reassigned, it is advisable to use const.

You may also want to check out the Enforce boolean attributes notation in JSX (jsx-boolean-value) rule from eslint-plugin-react,

When using a boolean attribute in JSX, you can either set the attribute value to true or leave it blank. This rule ensures consistency in your code by enforcing one approach over the other.

This explains my removal of the true value for startFormMonday in the Calendar component.

The updated code looks like this:

const MyCalendar = () => {
  const from = new Date();
  from.setDate(from.getDate() - 16);
  const to = new Date();
  let startDate = new Date();
  startDate.setMonth(startDate.getMonth() + 1);
  return (
    <View style={styles.container}>
      <Calendar
        monthsCount={24}
        startFormMonday
        startDate={startDate}
        selectFrom={from}
        selectTo={to}
        width={350}
        onSelectionChange={(current, previous) => console.log(current, previous)}
      />
    </View>
  );
};

I prefer using Atom text editor and adhere to eslint-config-airbnb for maintaining coding standards and detecting syntax errors efficiently.

Answer 4

To handle multiple statements in arrow functions, it is necessary to use block body { }.

For more information on function bodies of arrow functions, you can visit the MDN page.

With a concise body, only an expression is required, while an implicit return is automatically added. In contrast, a block body mandates the use of an explicit return statement.

Hence, ensure that you return the View component as the final statement in your MyCalendar.

I have removed the { } for the onSelectionChange of the Calendar component since a concise body suffices for a single line statement.

Some additional fixes:

For variables where the value is not reassigned, it is advisable to use const.

You may also want to check out the Enforce boolean attributes notation in JSX (jsx-boolean-value) rule from eslint-plugin-react,

When using a boolean attribute in JSX, you can either set the attribute value to true or leave it blank. This rule ensures consistency in your code by enforcing one approach over the other.

This explains my removal of the true value for startFormMonday in the Calendar component.

The updated code looks like this:

const MyCalendar = () => {
  const from = new Date();
  from.setDate(from.getDate() - 16);
  const to = new Date();
  let startDate = new Date();
  startDate.setMonth(startDate.getMonth() + 1);
  return (
    <View style={styles.container}>
      <Calendar
        monthsCount={24}
        startFormMonday
        startDate={startDate}
        selectFrom={from}
        selectTo={to}
        width={350}
        onSelectionChange={(current, previous) => console.log(current, previous)}
      />
    </View>
  );
};

I prefer using Atom text editor and adhere to eslint-config-airbnb for maintaining coding standards and detecting syntax errors efficiently.

What is the best way to set up initial state in react-native-day-picker?

Answer №1

Answer №2

Similar questions

Crystal-clear TextField component in Office UI Fabric

Angular 7: Efficiently Implementing Multiple Cascading Combobox Components

Mastering the Art of Promises in RXJS Observables

Customizing the colors of the Input field in the Material UI Text Field component with CSS styling can elevate the overall

Ways to identify browser version in Angular 4 to discourage IE usage

Attention: The PageContainer component requires React component classes to extend React.Component

The best location for storing Typescript files within an ASP.NET Core project

Error: Unable to access 'subscribe' property of empty object in Angular Unit Test

The extended class possesses a distinct type from the base class, which is reinforced by an interface

Encountered a TypeScript error: Attempted to access property 'REPOSITORY' of an undefined variable

The Text Label in React native hooks is not properly updating when using Usestate, resulting in consistently displaying the same value

The concept of ExpectedConditions appears to be non-existent within the context of

Understanding DefinitelyTyped: Deciphering the explanation behind 'export = _;'

Exploring the power of Javascript for number lookup

What is the most effective way to inform TypeScript that my function will return a class that has been expanded by a specific class?

Locate a specific item by its ID within a JSON file utilizing Angular version 2 or later

Ways to update image source in a React application

Definition duplication is necessary for TypeScript object properties

What is the best way to wait for the state to be set before mapping the array

How Can I Build a Dynamic Field Form Builder in Angular 4?