How to integrate other components in the card in React Card

24 Sep 20268 minutes to read

The React Card component provides a flexible container that can host any other component within its content area, enabling the creation of rich, interactive interfaces. By combining the structured layout benefits of React Card with the functionality of other components. Here, the ListView component is integrated inside the React Card to create an organized To-Do list interface, illustrating 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"));