want to convert class component into functional component it has two render method so i am confused how to convert it

Question

import React from "react";
import { render } from "react-dom";
import Chart from "./Chart";
import { getData } from "./utils";

import { TypeChooser } from "react-stockcharts/lib/helper";
import { useEffect, useState } from "react/cjs/react.production.min";

class ChartComponent extends React.Component {
    componentDidMount() {
        getData().then(data => {
            this.setState({ data })
        })
    }
    render() {
        if (this.state == null) {
            return <div>Loading...</div>
        }
        return (
            <TypeChooser>`enter code here`
                {type => <Chart type={type} data={this.state.data} />}
            </TypeChooser>
        )
    }
}

render(
    <ChartComponent />,
    document.getElementById("root")
);

the above mention i want to convert the class component into functional component i tried but its not running may be it has two render method
the above code is from index.js file now the below mentioned code is Chart.js which is imported in index.js

import React from "react";
import PropTypes from "prop-types";

import { scaleTime } from "d3-scale";
import { utcDay } from "d3-time";

import { ChartCanvas, Chart } from "react-stockcharts";
import { CandlestickSeries } from "react-stockcharts/lib/series";
import { XAxis, YAxis } from "react-stockcharts/lib/axes";
import { fitWidth } from "react-stockcharts/lib/helper";
import { last, timeIntervalBarWidth } from "react-stockcharts/lib/utils";

class CandleStickChart extends React.Component {
    render() {
        const { type, width, data, ratio } = this.props;
        console.log("type===>",type);
        const xAccessor = d => d.date;
        const xExtents = [
            xAccessor(last(data)),
            xAccessor(data[data.length - 100])
        ];
        return (
            <ChartCanvas height={400}
                    ratio={ratio}
                    width={width}
                    margin={{ left: 50, right: 50, top: 10, bottom: 30 }}
                    type={type}
                    seriesName="MSFT"
                    data={data}
                    xAccessor={xAccessor}
                    xScale={scaleTime()}
                    xExtents={xExtents}>

                <Chart id={1} yExtents={d => [d.high, d.low]}>
                    <XAxis axisAt="bottom" orient="bottom" ticks={6}/>
                    <YAxis axisAt="left" orient="left" ticks={5} />
                    <CandlestickSeries width={timeIntervalBarWidth(utcDay)}/>
                </Chart>
            </ChartCanvas>
        );
    }
}

CandleStickChart.propTypes = {
    data: PropTypes.array.isRequired,
    width: PropTypes.number.isRequired,
    ratio: PropTypes.number.isRequired,
    type: PropTypes.oneOf(["svg", "hybrid"]).isRequired,
};

CandleStickChart.defaultProps = {
    type: "svg",
};
CandleStickChart = fitWidth(CandleStickChart);

export default CandleStickChart;

Now i want to convert these two files in functional base

Answer 1

Hi Please replace your code with this I believe you will get your result..

https://codesandbox.io/s/aged-violet-octymg?file=/src/index.js

Thanks

const ChartComponent = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    getData().then((data) => {
      setData(data);
    });
  }, []);

  if (data == null) {
    return <div>Loading...</div>;
  }
  return (
    <TypeChooser>
      {(type) => <Chart type={type} data={data} />}
    </TypeChooser>
  );
};

render(<ChartComponent />, document.getElementById("root"));