How to integrate/access getorgchart with reactjs

Question

Is there any way to integrate/use getorgchart with reactjs as I want to include it in my react js application.I have tried below code(i.e render getorgchart html code in reactjs component) but it didn't work and having syntax error so please help me to set it up with reactjs.

import React, { Component } from 'react';
   import { BrowserRouter as Router, Switch, Route, Link } from 'react- router-dom';

   class Chart extends React.Component {
   constructor (props) {
   super(props)
   this.state = {
      };
    }
   render() {
   return (
    <html>
   <head>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script src="https://balkangraph.com/js/latest/orgchart.js"></script>
   </head>
   <body>
   <div id="orgchart">
   </div>
   <script>
   var chart = new OrgChart(document.getElementById("orgchart"), {
       theme:"planner",   //getting error on ':' colon      
       enableEdit: false, 
        enableZoom:false,
        enableSearch: false,
        enableMove: true,
        enableDetailsView: false,

        nodeMenu:{
                details: {text:"Details"},
                edit: {text:"Edit"},
                add: {text:"Add"},
                remove: {text:"Remove"}
            },
            nodeBinding: {
                field_0: "name"

            },
            nodes: [
                { id: 1, name: "Amber McKenzie"},
                { id: 2, pid: 1, name: "Ava Field" },
                { id: 3, pid: 1, name: "Peter Stevens" }
            ]
        });

    </script>
</body>

</html>

    );
}

}
export default Chart;

How to integrate/access getorgchart with reactjs

0 Answers0