Ant design editable Paragraph value become null when onChange is triggered

Question

import {Typography} from 'antd'
const {Paragraph} = Typography

const [value, setValue] = useState("This is initial value");
const onChangeEdit = editVal => {
    setValue(editVal);
};

<Paragraph editable={{ onChange: onChangeEdit }}> {value} </Paragraph>

I have issue with above code.

Initially, the Paragraph has "This is intial value" as a intital value. Hence, if I start editing, it should have "This is intial value" as a intial value.

But whenever I click the edit icon, the input box become empty instead of having inital value.

What's the solution to correct this issue?

Answer 1

I solved the issue! First, include the css of antd on index.js

import "antd/dist/antd.css";

then remove the spaces inside the <Paragraph> component, it should be:

<Paragraph editable={{ onChange: onChange }}>{value}</Paragraph>

here is the working link