Integrate other component inside the card in React Card component

25 Jan 2023 / 2 minutes to read

You can integrate any component inside the card element. Here ListView component is placed inside the card for showcasing the To-Do list.

[Class-component]

Source

Preview

App.jsx

index.jsx

App.tsx

index.tsx

import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import * as React from "react";
import * as ReactDOM from "react-dom";
export default class ReactApp extends React.Component {
    constructor() {
        super(...arguments);
        this.fields = { text: 'todoList' };
        // define the array of JSON
        this.todoList = [
            { todoList: 'Pay Bills' },
            { todoList: 'Call Chris' },
            { todoList: 'Meet Andrew' },
            { todoList: 'Visit Manager' },
            { todoList: 'Customer Meeting' },
        ];
    }
    render() {
        return (<div>
        <div className="e-card" id="basic">
          <div className="e-card-title">To-Do List</div>
          <div className="e-card-separator"/>
          <div className="e-card-content">
            <ListViewComponent dataSource={this.todoList} fields={this.fields} showCheckBox={true}/>
          </div>
        </div>
      </div>);
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));

import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import * as React from "react";
import * as ReactDOM from "react-dom";

export default class ReactApp extends React.Component<{}, {}> {
  public fields = { text: 'todoList' };
  // define the array of JSON
  public todoList: any = [
    { todoList: 'Pay Bills' },
    { todoList: 'Call Chris' },
    { todoList: 'Meet Andrew' },
    { todoList: 'Visit Manager' },
    { todoList: 'Customer Meeting' },
  ];
  public render() {
    return (
      <div>
        <div className="e-card" id="basic">
          <div className="e-card-title">To-Do List</div>
          <div className="e-card-separator" />
          <div className="e-card-content">
            <ListViewComponent dataSource={this.todoList} fields={this.fields} showCheckBox={true} />
          </div>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById("element"));

[Functional-component]