How to use an array to call React functions

Question

I am passing an array of arrays to a function called CreditFilter like this:

const rowData = [
  ['Capri LLC', '0012345', 'A0012', 'Y', 'View Details'],
  ['Capricorn INC', '0022345', 'B0012', 'N', 'View Details'],
  ['Cancer INC', '0033345', 'A0012', 'Y', 'View Details'],
];

const CompanySelection: FunctionComponent<RNDTaxCreditCompanySelectionProps> = props => {
  return (
    <>
      <Form<FormProps> initialValues={{ companyId: null }} onSubmit={() => {}}>
        {formProps => {
          return (
            <Card w={12 / 12} border={false}>
              <Card.Header p={0} px={0}>
                <Heading level={2} pt={1}>
                  R&D Tax Administration
                </Heading>
                <Heading level={5} pt={1}>
                  Please select a filing year and search for a company by ID or FEIN number.
                </Heading>
              </Card.Header>
              <CreditFilter status="" rowData={rowData} />
            </Card>
          );
        }}
      </Form>
    </>
  );
};

Please tell me how to access the array of this array inside the CreditFilter function? Can it be accessed using props? Or some other way?

interface Props {
  status: string;
}
export const CreditFilter: FunctionComponent<Props> = props => {
    // How to access the rowData variable here?
}

Answer 1

export const CreditFilter: FunctionComponent<Props> = (props: Props) => {
  
  const rowData = props.rowData; // 你可以通过props.rowData访问rowData的值
  const status = props.status; // 同样也可以通过props.status访问status的值

  // ... 现在你可以在组件逻辑中使用'rowData'和'status'
 
};

However, according to your example, the Props interface should be like this:

interface Props {
  status: string;
  rowData: string[][];
}

Because rowData is also passed to the component as props, not just status