RandomMockDataList.tsx

import * as React from "react";
import { PropertyControls, ControlType, Stack } from "framer";
import { List_Item } from "./canvas";

// Define type of property
interface Props {
  rows: number;
}

export class RandomMockDataList extends React.Component<Props> {
  // Set default properties
  static defaultProps = {
    rows: 10,
    ...Stack.defaultProps
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    rows: { type: ControlType.Number, title: "Rows", max: 20, min: 2 },
    ...Stack.propertyControls
  };

  render() {
    const rowCount = this.props.rows;
    return (
      <Stack {...this.props}>
        {Array(rowCount)
          .fill(0)
          .map((_, idx) => (
            <List_Item
              fatBurnt={`${(Math.random() * 100).toFixed(1)}g`}
              key={idx}
            />
          ))}
      </Stack>
    );
  }
}