69

I have a React DatePicker component with an input element. In order to handle the onChange event, I have onChangeHandler function defined. However, when I want to define the types of all the functions passed down as parameters in the onChangeHandler I get the following error:

Argument of type '(value: string) => void' is not assignable to parameter of type 'Dispatch<SetStateAction>'. Types of parameters 'value' and 'value' are incompatible. 
Type 'SetStateAction' is not assignable to type 'string'. Type '(prevState: string) => string' is not assignable to type 'string'.ts(2345

This error disappears when I define the function as any, but of course we don't want any in the code :).

Below is my setup. I have an input component named Datepicker in my main app that has gets a state from the main app.

const [value, setValue] = useState('');

It gets passed down as props in to a DatePicker component as such:

return (
 <form>
  <label htmlFor='date-picker-input'>Date:</label>
  <br />
  **
  <DatePicker
   value={value}
   setValue={setValue}
   dateFormat='YYYY/MM/DD'
  />
  **
  <button
   type='submit'
   value='Submit'>
   Submit
  </button>
 </form>
)

The DatePicker component looks something like this:

import onChangeHandler from '../utility/onChangeHandler'

interface IDatePickerProps {
 applicationMode?: boolean
 value: string
 setValue: (value: string) => void
 dateFormat: DateFormat
}
const DatePicker: React.FC<IDatePickerProps> = (props) => {
 const {value, setValue, dateFormat} = props
 const applicationMode = props.applicationMode ? true : false
 const [showCalendar, setShowCalendar] = useState(false)
 const [errorMessage, setErrorMessage] = useState('')
 const [clickedDate, setClickedDate] = useState<IClickedDate>({})
 const [dateObject, setDateObject] = useState<IDateObject>({})
 const [isClicked, setIsClicked] = useState<IIsClicked>({})
 //bunch of functions

 return (
  <>
   <div>
    <label htmlFor='date-picker-input aria-label=`enter date in the following format`'>
     {dateFormat}
    </label>
    <button>
     <CalendarIcon />
    </button>
    <input
     id='date-picker-input'
     type='text'
     value={value}
     onChange={(e) =>
      onChangeHandler(
       e,
       dateFormat,
       setValue,
       setErrorMessage,
       setClickedDate,
       setIsClicked
      )
     }
    />
   </div>
   <div>
    <MonthPicker />
    <table>
     <DaysHeading />
     <DatesOfMonth />
    </table>
   </div>
  </>
 )
}

Here is how the onChangeHandler is defined and setValue is used:

const onChangeHandler = (
 event: React.ChangeEvent<HTMLInputElement>,
 dateFormat: string,

 //line causing the error is here:
 setValue: React.Dispatch<React.SetStateAction<string>>,

 setErrorMessage: React.Dispatch<React.SetStateAction<string>>,
 setClickedDate: React.Dispatch<React.SetStateAction<IClickedDate>>,
 setIsClicked: React.Dispatch<React.SetStateAction<IIsClicked>>
): void => {
 const value = event.target.value
 setValue(value)
 let date = ''
 let month = ''
 let year = ''
 let dateFormatCheck
 let dateIsValid
 let invalidAt
 const errorNote = 'Please check entered '

 if (value.length === 10) {
  setErrorMessage('')
  if (dateFormat === 'YYYY/MM/DD') {
   dateFormatCheck = moment(value, 'YYYY/MM/DD', true)
   dateIsValid = dateFormatCheck.isValid()

   if (dateIsValid === true) {
    //do some stuff
   } else {
    invalidAt = dateFormatCheck.invalidAt()
    setErrorMessage(errorNote + errorDefinition(invalidAt))
   }
  }
 }
}
//some other validators and no return value
export default onChangeHandler
0

3 Answers 3

166

You should set type of setValue inside IDatePickerProps to:

setValue : React.Dispatch<React.SetStateAction<string>>

Or change setValue inside onChangeHandler to:

setValue: (value: string) => void;
0
4
setValue : React.Dispatch<React.SetStateAction<any>>

you need to figure out which type is your data and change it instead of any

0
-1

My solution for this (I think it is more readable):
In the IDatePickerProps

  setValue: (setValueFunc: (value: string) => void) => void;
1
  • and how to know what is dispatch and what I set action? Aug 26 at 9:27

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.