如何创建包装器组件并传递道具以在包装器的父级中调用它

Question

I have this component:

import React from 'react';
import PropTypes from 'prop-types';

const TableExpandedRowItem = ({ dataTitle, rowValue, cellClassProp }) => (
  <div data-title={dataTitle} className={cellClassProp}>
    <p>{rowValue}</p>
  </div>
);

TableExpandedRowItem.propTypes = {
  dataTitle: PropTypes.string.isRequired,
  rowValue: PropTypes.string.isRequired,
  cellClassProp: PropTypes.string,
};

TableExpandedRowItem.defaultProps = {
  cellClassProp: 'cell',
};

export default TableExpandedRowItem;

Which works perfect when I call it on the parent, like this:

{rowExpanded.billingItems &&
  rowExpanded.billingItems.map(
    item =>
      rowExpanded.id ===
        item.cancellationRequestId && (
        <div className="row" key={item.id}>
          <TableExpandedRowItem
            dataTitle={
              item.billingItem.description
            }
            rowValue={
              item.billingItem.description
            }
          />
          <TableExpandedRowItem
            dataTitle={
              item.billingItem.recurringFee
            }
            rowValue={
              item.billingItem.recurringFee
            }
          />
        </div>
      ),
  )}

But I want to create a wrapper component. if you see the code above, there is a div wrapping the calls to <TableExpandedRowItem/> component.

So I want to do something like this:

import TableExpandedRowItem from './TableExpandedRowItem'

const TableExpandedRowWrapper = ({ rowClassProp }) => (
  <div className={rowClassProp}>
    <TableExpandedRowItem  dataTitle={}/>
  </div>
);

But if you see in the second code snippet, I am calling it twice with different data. How can I replicate that in the wrapper component instead?

Answer 1

Not really sure if this is what you want to achieve but just put your keys into a map and do another iteration.

Note: Code is not tested and not optimized for avoiding unnecessary render cycles.

{rowExpanded.billingItems &&
  rowExpanded.billingItems.map(
    item =>
      rowExpanded.id === item.cancellationRequestId && (
        <TableExpandedRowWrapper billingItem={item.billingItem} />
      ),
  )}

Your wrapper

const TableExpandedRowWrapper = ({ billingItem }) => (
  <div className="row">
    // alternatively iterate over Object.values(billingItem)
    ['description', 'recurringFee'].map(key) =>
        <TableExpandedRowItem
          dataTitle={
            billingItem[key].description
          }
          rowValue={
            billingItem[key].description
          }
        />
    )
  </div>
);

Sidenote: it seems a bit strange that in your example the rowValue and your dataTitle are both description ...