How can I convert class component to functional component?

Question

I have a class based component, and I want to convert to the functional based component, my code is below:

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.items = [
            {
                text: 'Display Settings'
            },
            {
                text: 'System Settings'
            },
            {
                text: 'Additional Settings'
            }
        ];
    }
    render() {
        return (<div>
        <DropDownButtonComponent items={this.items} iconCss='e-icons e-image' cssClass='e-caret-hide'/>
      </div>);
    }
}
ReactDom.render(<App />, document.getElementById('button'));

But I did not get it how to convert this part below, any idea?

  constructor() {
        super(...arguments);
        this.items = [
            {
                text: 'Display Settings'
            },
            {
                text: 'System Settings'
            },
            {
                text: 'Additional Settings'
            }
        ];
    }

score 2 · Accepted Answer · answered Sep 10 '21 at 15:07

2

This could be converted to functional component as bellow:

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

const App = () => {
  const items = [
    {
      text: 'Display Settings',
    },
    {
      text: 'System Settings',
    },
    {
      text: 'Additional Settings',
    },
  ];

  return (
    <div>
      <DropDownButtonComponent
        items={items}
        iconCss="e-icons e-image"
        cssClass="e-caret-hide"
      />
    </div>
  );
};

ReactDom.render(<App />, document.getElementById('button'));

answered Sep 10 '21 at 15:07

Ryan Le

7,708
1
13
23

Sure, Let me know if it helps – Ryan Le Sep 10 '21 at 15:11
it says 'items' is not defined no-undef – Sep 10 '21 at 15:31
Did you forget to put `const` before `items`? – Ryan Le Sep 10 '21 at 15:33

How can I convert class component to functional component?

1 Answers1