MarkMap Correction

The code in the demo of markmap library from https://markmap.js.org/ does not follows the grammar of Typescript. We need to correct some errors for it.

Code in markmap-hooks.tsx:
` import React, { useState, useRef, useEffect } from 'react';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';

const transformer = new Transformer();
const initValue = `# markmap

• beautiful
• useful
• easy
• interactive `;

export default function MarkmapHooks() {
const [value, setValue] = useState(initValue);
// Ref for SVG element
const refSvg = useRef(null);
// Ref for markmap object
const refMm = useRef(null);

useEffect(() => {
// Create markmap and save to refMm
if (refMm.current) return;
refMm.current = Markmap.create(refSvg.current);
}, [refSvg.current]);

useEffect(() => {
// Update data for markmap once value is changed
const mm = refMm.current;
if (!mm) return;
const { root } = transformer.transform(value);
mm.setData(root);
mm.fit();
}, [refMm.current, value]);

const handleChange = (e:any) => {
setValue(e.target.value);
};

return (

);
}

I didn’t fix the error in markmap-class.tsx and used it as component so the code from index.tsx is different:
import React, { useState } from 'react';
import { render } from 'react-dom';
import MarkmapHooks from './markmap-hooks';
import './style.css';

function TryApp() {
const [type, setType] = useState('hooks');

const Component = MarkmapHooks ;
return (

);
}

export default TryApp;
`