javascriptreactjscompiler-errorsdaterangepicker

Failed to compile src\Search.js: setEndDate, selectionRange and handSelect are not defined

I receive an error for the following code:

import React,{useState} from 'react'
import './search.css'
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css"
import {DateRangePicker} from "react-date-range";

function Search() {
   const[startDate,setStartDate]=useState(new Date());
   const[endDate,setendDate]=useState(new Date());

const selctionRange = {
    startdate:startDate,
    endDate:endDate,
    key:"selection",
}

function handleSelect(ranges){
    setStartDate(ranges.seection.startDate);
    setEndDate(ranges.selection.endDate);
}
return (
    <div className="search">
        <DateRangePicker ranges={
            [selectionRange]} onChange={handSelect}/>
         
    </div>
)
}

export default Search

The error message is:

Failed to compile
src\Search.js
  Line 19:9:   'setEndDate' is not defined      no-undef
  Line 24:18:  'selectionRange' is not defined  no-undef
  Line 24:45:  'handSelect' is not defined      no-undef

I searched for the keywords to learn more about each error, but I could not see the issue. What did I miss ?

Solution

  • You're using setEndDate but you defined setendDate in your useState (without the major E).

    Edit: Same thing for selectionRange, you defined selctionRange and handSelect with handleSelect. Only typos.