React onChange method not running from component

Question

I am trying to override an onChange method in a component but the method is not running on any DOM events like onChange, onClick, onDblClick etc. Here are the codes for the part where the component is being rendered and the component. Here is the onChange Documentation for the package being used. Any help will be appreciated, thanks for taking out the time :)

import React, { useState } from "react";
import JsEditor from "../editor/dynamic/JsEditor";

const Contribute = () => {
 const [jsCode, setJsCode] = useState("");

  const onChange = () => {
    {
      console.log("Js change fired");
    }
  };

  return (
    <div>
          <JsEditor onChange={onChange} />
    </div>
  );
};

export default Contribute;

Component's Code

import React from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/hint/show-hint.css';



import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/lint.js';
import 'codemirror/addon/hint/javascript-hint';

import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;

const JsEditor = () => {
  return (
    <div>
      <h1> JavaScript </h1>
      <CodeMirror
        value='//Write your JavaScript here :)'
        options={{
          gutters: ["CodeMirror-lint-markers"],
          mode: "javascript",
          theme: "material",
          lineNumbers: true,
          lineWrapping: true,
          lint: true, 
        }}
       
      />
    </div>
  );
};

export default JsEditor;

Answer 1

The error that is you are not passing the onChange prop to CodeMirror. Check the code below, i'll mark the difference

import React from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/hint/show-hint.css';



import 'codemirror/mode/javascript/javascript.js';
import 'codemirror/addon/lint/javascript-lint';
import 'codemirror/addon/lint/lint.js';
import 'codemirror/addon/hint/javascript-hint';

import { JSHINT } from 'jshint';
window.JSHINT = JSHINT;

const JsEditor = ({onChange}) => { // Receive the onChange passed to your component
  return (
    <div>
      <h1> JavaScript </h1>
      <CodeMirror
        value='//Write your JavaScript here :)'
        options={{
          gutters: ["CodeMirror-lint-markers"],
          mode: "javascript",
          theme: "material",
          lineNumbers: true,
          lineWrapping: true,
          lint: true, 
        }}
        onChange={onChange} // Pass the onChange prop to the library
       
      />
    </div>
  );
};


export default JsEditor;