Rendered component props

Description

you can pass props to the rendered component, this allows to share state with parent component

Example

Code

import React, { useState } from "react";
import CustomListView from "@components/custom-list-view/CustomListView";

import {
  Avatar,
  Button,
  GhostIconButton,
  Modal,
} from "@tag/tag-components-react-v4";
import {
  ChevronDownLined,
  ChevronUpLined,
  Edit2Filled,
  Edit2Lined,
} from "@tag/tag-icons";

export const Demo = () => {
  const [visible, setVisible] = useState(false);

  const data = [
    {
      name: "John",
      age: 21,
      src: "https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    {
      name: "Alice",
      age: 28,
      src: "https://images.pexels.com/photos/1458332/pexels-photo-1458332.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    {
      name: "Bob",
      age: 34,
      src: "https://images.pexels.com/photos/1844547/pexels-photo-1844547.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    {
      name: "Clara",
      age: 22,
      src: "https://images.pexels.com/photos/977311/pexels-photo-977311.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
    {
      name: "Evelyn",
      age: 25,
      src: "https://images.pexels.com/photos/12260115/pexels-photo-12260115.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    },
  ];

  const openModal = () => {
    setVisible(true);
  };

  return (
    <>
      <CustomListView
        data={data}
        renderItem={(element) => (
          <div className="person-info" style={{ display: "flex" }}>
            <Avatar src={element.src} />
            <div className="person-title">
              <strong>{element.name}</strong> (age : {element.age})
            </div>
            <div className="person-action">
              <GhostIconButton
                icon={<Edit2Lined accent="white" />}
                size="small"
                accent="teal"
                onClick={() => {
                  openModal();
                }}
              />
            </div>
          </div>
        )}
      />
      <Modal
        visible={visible}
        accent="teal"
        heading="Details"
        onClose={() => setVisible(false)}
      >
        this is a modal managed from the parent component
        <br />
        the openModal function is passed to the rendered component as a prop
      </Modal>
    </>
  );
};

Result