Adding Another Table From A Different Object

Here I have a custom table component where I am returning a dictionary of products {productData}. I use the key as the accordion header which is a date string and then map the products of that key.

These product lists have extra expenses that come from a separate array and they have an effective date that is equal to the key. For these, instead of returning another dictionary I am just returning them in an array of expenses hoping I can just match them (expenses.effectiveDate === key) I want to add another table to these accordions for each expense that has a matching effective date.

Right now I only get the first match back and even then it will display all of the expenses in the array, not the ones that are unique to that list.

I have tried to use a foreach in the renderPriceList method but it throws the error:

"An expression of type void cannot be tested for truthiness"

I have also tried an IF statement but that throws a ton of errors as well.

How can I get my expenses matched up to the products tables for each instance where the expense has an effectiveDate that matches the key?

  private formatOperatorProductPriceData = (key: string) => {
    const products = this.state.operatorPrices[key];

    const headers = [
        "Product Name",
        "Primary Category",
        "Taxable",
        "Size",
        "Unit",
        "Specific Gravity",
        "Weight",
        "Cost",
        "Price",
    ];

    const rows = products.map((value: any, index: any) =>
        [
            {
                content: value.name
            },
            {
                content: value.category,
            },
            {
                content: this.renderTaxableCheckbox('operatorPrices', value, key, index),
                sortItem: value.isTaxable,
                type: 'render',
            },
            {
                content: value.size
            },
            {
                content: value.unit
            },
            {
                content: value.specificGravity,
            },
            {
                content: value.weight,
            },
            {
                content: this.renderCostInput(value, index, key),
                sortItem: value.cost,
                type: 'render',
            },
            {
                content: this.renderPriceInput(value, index, key),
                sortItem: value.price,
                type: 'render'
            },
        ]
    );
    return { headers, rows };
}

private formatOperatorExpensePriceData = (key: any) => {
    const expenses = this.state.operatorExpensePrices;
    console.log(expenses);
    const headers = [
        "Name",
        "Type",
        "Taxable",
        "Cost",
        "Price",
    ];
    const rows = expenses.map((value: any, index: any) =>
        [
            {
                content: value.name
            },
            {
                content: value.isRental ? "Rental" : "Service"
            },
            {
                 content: this.renderExpenseTaxableCheckbox('operatorExpensePrices', value, index),
                sortItem: value.isTaxable,
                 type: 'render',
            },
            {
                 content: this.renderExpenseCostInput(value, index),
                sortItem: value.cost,
                 type: 'render',
            },
            {
                 content: this.renderExpensePriceInput(value, index),
                sortItem: value.price,
                 type: 'render'
            }
        ]
    );
    
    return { headers, rows };
}


private renderPriceLists = (key: string, index: any) => {
    const productData = this.formatOperatorProductPriceData(key);
    const expenseData = this.formatOperatorExpensePriceData(key);
    return (
        <React.Fragment>
            <Row>
                <Col>
                    <h4 className="accordian-h4">
                        <span onClick={this.toggleList(key)}>
                            <OpenArrow open={this.state.priceListOpen[key]} />
                            {' '}
                            {key}
                            {' '}
                        </span>
                    </h4>
                </Col>
            </Row>
            {
                this.state.priceListOpen[key] &&
                <Row>
                    <Col>
                        <DataTable
                            list={productData}
                            headerButtons={this.operatorPriceHeaderButtons}
                            maxHeight='50vh'
                        />
                    </Col>
                </Row>
            }
            {
                this.state.priceListOpen[key] && this.state.operatorExpensePrices[index].effectiveDate === key &&
                <Row>
                    <Col colspan='10'>
                        <DataTable
                            list={expenseData}
                            headerButtons={this.operatorPriceHeaderButtons}
                            maxHeight='50vh'
                        />
                    </Col>
                </Row>
          
            }

        </React.Fragment>
    );
}