How to use Syncfusion components with functional components in React?
This knowledge base explains how to use Syncfusion components with functional components in React and also explains the difference between class and functional components.
In React, there are two main types of components named Class component and Functional component.
Class component
A Class component requires to extend from React.Component and create a render function that returns a React element. The “extends React.Component” statement, creates inheritance to React.Component and gives access to React.Component's functions.
The Class components are stateful components because they have React lifecycle methods. It also has constructors, render function, and state(data) management.
Javascript
export default class App extends React.Component {
public render() {
// Your code is here
}
};
Functional component
A functional component accepts props as an argument and returns a React element. You cannot use ref on functional components in React because they do not have instances. A functional component is merely like a plain JavaScript function which cannot have an instance.
The functional components are stateless components because they do not have lifecycle methods of React.
Benefits of using Functional component:
- Easy to test and debug.
- Have better performance.
- Less code to write.
- Improve code readability.
Javascript
function Home() {
return(
// Your code is here
)
}
export default Home;
We have created the Syncfusion grid component in React using both Class and Functional components.
In the App component, we have used the class component to create the Syncfusion grid component.
Javascript
import { ColumnDirective, ColumnsDirective, Filter, GridComponent, Group } from '@syncfusion/ej2-react-grids';
import { Inject, Page, PageSettingsModel, Sort, SortSettingsModel } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
import Home from './Home';
export default class App extends React.Component<{}, {}>{
public pageSettings: PageSettingsModel = { pageSize: 6 }
public sortSettings: SortSettingsModel = { columns: [
{field: 'EmployeeID', direction: 'Ascending' }
] };
public render() {
return <div> <Home/> <br /> <br /> <p>Grid-2 using Class Components</p>
<GridComponent dataSource={data} allowPaging={true} pageSettings={ this.pageSettings }
allowSorting={true} sortSettings={ this.sortSettings }>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter, Group]} />
</GridComponent> </div>
}
};
In the Home component, we have used the functional component to create the Syncfusion grid component.
Javascript
import { ColumnDirective, ColumnsDirective, GridComponent } from '@syncfusion/ej2-react-grids';
import { Filter, Group, Inject, Page,PageSettingsModel, Sort ,SortSettingsModel} from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { sdata } from './datasource';
function Home() {
const pageSettings:PageSettingsModel = { pageSize: 6 };
const sortSettings:SortSettingsModel = { columns: [
{field: 'EmployeeID', direction: 'Ascending' }
] };
return(<div> <p>Grid-1 using Functional Components</p>
<GridComponent dataSource={sdata} allowPaging={true} pageSettings={ pageSettings }
allowSorting={true} sortSettings={ sortSettings }>
<ColumnsDirective>
<ColumnDirective field='OrderID' width='100' textAlign="Right"/>
<ColumnDirective field='CustomerID' width='100'/>
<ColumnDirective field='EmployeeID' width='100' textAlign="Right"/>
<ColumnDirective field='Freight' width='100' format="C2" textAlign="Right"/>
<ColumnDirective field='ShipCountry' width='100'/>
</ColumnsDirective>
<Inject services={[Page, Sort, Filter, Group]} />
</GridComponent>
</div>
)
}
export default Home;
Sample link: https://github.com/SyncfusionExamples/Functional-Components-in-React
The following screenshot shows the result of the created React sample using Class and Functional components.
Conclusion
I hope you enjoyed learning on how to customize the expander icon of React Accordion component.
You can refer to our React feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Accordion Example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
