Question 266207 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to convert this class component to functional component

I have this class component and i want to convert it in a functional component, how can I do? I tried to do it but i have some issue whit the this.chart properties in the componentDidMount() method, where i have to put it in functional component? I also tried to use the hook useRef() in the place of createRef() is it correct? Anyone can provide me a full converted example so i can understand how to do it? Thank you

import React, { Component } from 'react';
import OrgChart from '@balkangraph/orgchart.js';

export default class Chart extends Component {
  constructor(props) {
    super(props);
    this.divRef = React.createRef();
  }

  shouldComponentUpdate() {
    return false;
  }

  componentDidMount() {
    this.chart = new OrgChart(this.divRef.current, {
      nodes: this.props.nodes,

      nodeBinding: {
        field_0: 'name',
        img_0: 'img',
      },
    });

    this.chart.on('init', function () {
      console.log('init');
    });

    this.chart.on('click', function () {
      console.log('click');
    });
  }

  render() {
    return <div id="tree" ref={this.divRef}></div>;
  }
}
Tags:

2

Answers


  1. 0

    It’s not that much different really.

    The main thing is the use of the React.useEffect..

    Also note, in your above your not doing anything with chart on component unmount, if you return a function from useEffect you can use that to cleanup on unmount. Also note the need for this is now gone..

    Below is your code converted. E&OE

    import React, { useEffect } from 'react';
import OrgChart from '@balkangraph/orgchart.js';

export default function Chart(props) {
  const divRef = React.createRef();
  useEffect(() => {
    const chart = new OrgChart(divRef.current, {
      nodes: props.nodes,
      nodeBinding: {
        field_0: 'name',
        img_0: 'img',
      },
    });

    chart.on('init', function () {
      console.log('init');
    });

    chart.on('click', function () {
      console.log('click');
    });

  }, []);
  return <div id="tree" ref={divRef}></div>
}

    As pointed out above your current code is not doing anything about unmounting the component, often things like chart components have a destroy method etc, looking at the docs for OrgCharts if it’s the same -> https://balkan.app/OrgChartJS/API/classes/OrgChart#destroy

    So to really finish the component off,. I would put this in the useEffect hook

    useEffect(() => {
  const chart = ....
  ....
  return () => {
    chart.destroy();
  }
},[]);
    Login or Signup to reply.
  2. 0 
    import React, { useEffect, useRef } from 'react';
import OrgChart from '@balkangraph/orgchart.js';

function Chart({ nodes }) {
  const divRef = useRef();
  let chart = null;

  useEffect(() => {
    chart = new OrgChart(divRef.current, {
      nodes: nodes,
      nodeBinding: {
        field_0: 'name',
        img_0: 'img',
      },
    });

    chart.on('init', function () {
      console.log('init');
    });

    chart.on('click', function () {
      console.log('click');
    });

    return () => {
      // Cleanup when the component unmounts
      if (chart) {
        chart.destroy();
      }
    };
  }, [nodes]);

  return <div id="tree" ref={divRef}></div>;
}

export default Chart;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search