Integrate other component inside the card in React Card component

7 Oct 20258 minutes to read

The Card component provides a flexible container that can host any other component within its content area. This approach enables rich, interactive interfaces by combining the structured layout benefits of cards with the functionality of other components. Here, the ListView component is integrated inside the card to create an organized To-Do list interface, demonstrating how cards can enhance content presentation and user experience.

[Class-component]

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 {
    fields = { text: 'todoList' };
    // define the array of JSON
    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]

import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import * as React from "react";
import * as ReactDOM from "react-dom";
function ReactApp() {
    let fields = { text: 'todoList' };
    // define the array of JSON
    let todoList = [
        { todoList: 'Pay Bills' },
        { todoList: 'Call Chris' },
        { todoList: 'Meet Andrew' },
        { todoList: 'Visit Manager' },
        { todoList: 'Customer Meeting' },
    ];
    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={todoList} fields={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";

function ReactApp () {
  let fields = { text: 'todoList' };
  // define the array of JSON
  let todoList: any = [
    { todoList: 'Pay Bills' },
    { todoList: 'Call Chris' },
    { todoList: 'Meet Andrew' },
    { todoList: 'Visit Manager' },
    { todoList: 'Customer Meeting' },
  ];

    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={todoList} fields={fields} showCheckBox={true} />
          </div>
        </div>
      </div>
    );

}
ReactDOM.render(<ReactApp />, document.getElementById("element"));