Next.js error in MDEditorProps.onChange

[arshadalisoomro]

I have tried this in my Next.js app:

import "@uiw/react-md-editor/markdown-editor.css";
import "@uiw/react-markdown-preview/markdown.css";
import dynamic from "next/dynamic";
import { useState } from "react";

const MDEditor = dynamic(
  () => import("@uiw/react-md-editor"),
  { ssr: false }
);

function HomePage() {
  const [value, setValue] = useState("**Hello world!!!**");
  return (
    <div>
      <MDEditor value={value} onChange={setValue} />
    </div>
  );
}

export default HomePage;

but onChange={setValue} always gives me error:

(property) MDEditorProps.onChange?: ((value?: string | undefined) => void) | undefined
Event handler for the onChange event.

Type 'Dispatch<SetStateAction<string>>' is not assignable to type '(value?: string | undefined) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'string | undefined' is not assignable to type 'SetStateAction<string>'.
      Type 'undefined' is not assignable to type 'SetStateAction<string>'.ts(2322)
Editor.d.ts(16, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & MDEditorProps & RefAttributes<ContextStore>'

[jaywcjlove]

<MDEditor
  value={value}
-  onChange={setValue} />
+  onChange={(val) => setValue(val)} />

@arshadalisoomro

[falconlee236]

I'll try to your solution because I faced same problems with arshadalisoomro but I found new problems in typescript React Version 4.9.4

import { useState } from 'react';
import styled from 'styled-components';
import MDEditor from '@uiw/react-md-editor';
import Topbar, { OpenStateProps } from '../Component/Topbar';

// {openState} : {openState : types}
export default function Contents({ openState }: OpenStateProps) {
  const [value, setValue] = useState('**Hello world!!!**');
  return (
    <ContentsDiv isOpen={openState.open}>
      <Topbar openState={openState} />
      <div className="container">
        <MDEditor value={value} onChange={(val) => setValue(val)} />
        <MDEditor.Markdown source={value} style={{ whiteSpace: 'pre-wrap' }} />
      </div>
    </ContentsDiv>
  );
}

in onChange={(val) => setValue(val)} always give me error

Argument of type 'string | undefined' is not assignable to parameter of type 'SetStateAction'. Type 'undefined' is not assignable to type 'SetStateAction'.ts(2345)

so I fix my code const [value, setValue] = useState<string | undefined>('**Hello world!!!**');

this code works well!! @jaywcjlove