Access value of second code mirror

[alex1897]

Hello Everyone,

I am having on a page two code mirror editors. What want to archive is send the value of booth data to one API for validation if in one of the editors is something changed. The issue I have is how do I access the editor values. That is my current code:

const [schemaFile, setSchemaFile] = useState({});
const [jsonFile, setJsonFile] = useState({});

function validate() {
    console.log(schemaCodeMirror.props.value)
    console.log(jsonCodeMirror.props.value)
}

let schemaCodeMirror = <CodeMirror
    value={JSON.stringify(schemaFile, null, 2)}
    height="300px"
    extensions={[json()]}
    onChange={(value, viewUpdate) => {
        validate()
    }}
    style={{
        border: '1px solid silver'
    }}
/>

let jsonCodeMirror = <CodeMirror
    value={JSON.stringify(jsonFile, null, 2)}
    height="300px"
    extensions={[json(), linter(validationErrorMarker), lintGutter()]}
    onChange={(value, viewUpdate) => {
        validate()
    }}
    style={{
        border: '1px solid silver'
    }}
/>

Unfortunately this outputs always original value. I also tried to update with setJsonFile but wasn't able to figure out how it works. And sorry if this is obvious but I'm very new to JS/React. Can someone help?

Thanks Alex

[jaywcjlove]

https://codesandbox.io/embed/react-codemirror-example-codemirror-6-slvju?fontsize=14&hidenavigation=1&theme=dark

You can use codesandbox.io to try out your ideas, and we'll help you improve.

@alex1897

[alex1897]

@jaywcjlove thanks I think I figured out a way that works for me. What do you think?

https://codesandbox.io/s/react-codemirror-example-codemirror-6-forked-6qrzwo

[jaywcjlove]

Oh, it's kinda hard for me, you should go here -> Discuss fix the problem. @alex1897

I don't know if anyone can help.