Access value of second code mirror

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

Start with the validate function and the onChange callbacks in the issue's CodeMirror component example. Trace how schemaCodeMirror, jsonCodeMirror, schemaFile, and jsonFile are created and updated, then define completion as both editors' current contents being available to the validation API after either editor changes.