I have a problem in the code I wrote. Can somebody help me fix this?

Compiled with problems:X

[eslint] src/components/ui/FindScooterForm/FindScooterForm.jsx Line 12:120: 'addMonths' is not defined no-undef

import React, { useState } from 'react'
import '../../../styles/findscooterform.css';
import {Form, FormGroup} from 'reactstrap';
import DatePicker from 'react-datepicker';

const FindScooterForm = () => {
    const [startDate, setStartDate] = useState(null);
  return (
    <Form className='form'>
        <div className='d-flex align-items-center justify-content-between flex-wrap'>
            <FormGroup className='form__group'>
                <DatePicker selected={startDate} onChange={(date)=> setStartDate(date)} minDate={new Date ()} maxDate={addMonths(new Date (), 5)} showDisabledMonthNavigation />      
            </FormGroup>
            <FormGroup className='form__group'>
                <input className='rent__time' type='time' placeholder='Time' required />
            </FormGroup>
            <FormGroup className='select__group'>
                <select name='duration'>
                    <option value='2days'>2 Days</option>
                    <option value='3days'>3 Days</option>
                    <option value='4days'>4 Days</option>
                    <option value='5days'>5 Days</option>
                    <option value='6days'>6 Days</option>
                    <option value='1week'>1 Week</option>
                    <option value='2week'>2 Week</option>
                    <option value='3week'>3 Week</option>
                    <option value='1month'>1 Month</option>
                </select>
            </FormGroup>

            <FormGroup className='select__group'>
                <select name='pickup'>
                    <option value='selected'>Our Office</option>
                    <option value='location'>Send to my location</option>
                </select>
            </FormGroup>

            <FormGroup className='select__group'>
                <button className='btn__form-scooter'>
                    <a href=''>Find a Scooter</a>
                </button>
            </FormGroup>
        </div>
    </Form>
  )
}

export default FindScooterForm

CodePudding user response：

You are missing the date-fns package.

Add "date-fns": "2.29.3", to your dependencies in your package.json and import it like so at the top of your jsx file.

import { addMonths } from 'date-fns';