title: How can I define TypeScript type for a setState function when React.Dispatch<React.SetStateAction<string>> not accepted?
body: <p>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:</p>
  <blockquote>
  <p>Argument of type '(value: string) =&gt; void' is not assignable to
  parameter of type 'Dispatch'. Types of parameters
  'value' and 'value' are incompatible. Type 'SetStateAction' is not
  assignable to type 'string'. Type '(prevState: string) =&gt; string' is
  not assignable to type 'string'.ts(2345</p>
  </blockquote>
  <p>This error disappears when I define the function as &quot;any&quot; but ofcourse we dont want any in the code :).</p>
  <p>Below is my setup. I have an input component named Datepicker in my main app that has gets a state from the main app.</p>
  <blockquote>
  <p>const [value, setValue] = useState('');</p>
  </blockquote>
  <p>It gets passed down as props in to a DatePicker component as such:</p>
  <pre><code>  return (
          &lt;form&gt;
              &lt;label htmlFor=&quot;date-picker-input&quot;&gt;Date:&lt;/label&gt;&lt;br /&gt;
              **&lt;DatePicker value={value} setValue={setValue} dateFormat=&quot;YYYY/MM/DD&quot; /&gt;**
              &lt;button type=&quot;submit&quot; value=&quot;Submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
  );
  </code></pre>
  <p>The DatePicker component looks something like this:</p>
  <pre><code>    import onChangeHandler from &quot;../utility/onChangeHandler&quot;;
  
    interface IDatePickerProps {
     applicationMode?: boolean;
     value: string;
     setValue: (value: string) =&gt; void;
     dateFormat: DateFormat;}  
      
      const DatePicker: React.FC&lt;IDatePickerProps&gt; = (props) =&gt; {
             const { value, setValue, dateFormat } = props
             const applicationMode = props.applicationMode ? true : false;
             const [showCalendar, setShowCalendar] = useState(false);
             const [errorMessage, setErrorMessage] = useState(&quot;&quot;);
             const [clickedDate, setClickedDate] = useState&lt;IClickedDate&gt;({});
             const [dateObject, setDateObject] = useState&lt;IDateObject&gt;({});
             const [isClicked, setIsClicked] = useState&lt;IIsClicked&gt;({});
                //bunch of functions 
          
   return (
      &lt;&gt;
        &lt;div&gt;
          &lt;label htmlFor=&quot;date-picker-input aria-label=&quot;enter date in the following format&quot;&gt;{dateFormat}&lt;/label&gt;
          &lt;button&gt;&lt;CalendarIcon /&gt;&lt;/button&gt;
          &lt;input id=&quot;date-picker-input&quot; type=&quot;text&quot; value={value}
      onChange={(e) =&gt; onChangeHandler(e, dateFormat, setValue, setErrorMessage, setClickedDate, 
      setIsClicked)} /&gt;
        &lt;/div&gt;
        &lt;div &gt;
          &lt;MonthPicker/&gt;
          &lt;table&gt;
          &lt;DaysHeading /&gt;
          &lt;DatesOfMonth /&gt;
          &lt;/table&gt;
        &lt;/div&gt;
     &lt;/&gt; );};
  </code></pre>
  <p>Here is how the onChangeHandler is defined and setValue is used:</p>
  <pre><code>const onChangeHandler = (
      event: React.ChangeEvent&lt;HTMLInputElement&gt;,
      dateFormat: string,
  
  **//line causing the error is here:**
      setValue: React.Dispatch&lt;React.SetStateAction&lt;string&gt;&gt;,
  
      setErrorMessage: React.Dispatch&lt;React.SetStateAction&lt;string&gt;&gt;,
      setClickedDate: React.Dispatch&lt;React.SetStateAction&lt;IClickedDate&gt;&gt;,
      setIsClicked: React.Dispatch&lt;React.SetStateAction&lt;IIsClicked&gt;&gt;): void =&gt; {
  
      const value = event.target.value;
      setValue(value);
      let date = &quot;&quot;;
      let month = &quot;&quot;;
      let year = &quot;&quot;;
      let dateFormatCheck;
      let dateIsValid;
      let invalidAt;
      const errorNote = &quot;Please check entered &quot;
  
      if (value.length === 10) {
          setErrorMessage(&quot;&quot;);
          if (dateFormat === &quot;YYYY/MM/DD&quot;) {
              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;
  </code></pre>