Q:

SetState of an object with multiple items

I am trying to set the state of object with the following characteristics:
interface GridValue {
    control: string;
    rowIndex: number;
    cellIndex: number;
}

And my component state contains the following:
interface ComponentState {
    results: InChartModel[];
    loading: boolean;
    control: string;
    modalValue: GridValue[];
}

But when I attempt to set the state with the following code, it doesn't work (types of property "modalValue" are incompatible):
handleClick(e: any) {
    const rindex: number = e.currentTarget.rowIndex;
    const cindex: number = e.target.cellIndex;
    const grid: any = e.currentTarget.parentNode.parentNode;
    const ctrl: string = grid.rows[rindex].cells[0].innerText;
    const metric: string = grid.rows[rindex].cells[1].innerText;
    this.setState({
        modalValue: {
            "control": ctrl,
            "rowIndex": rindex,
            "cellIndex": cindex
        }
    })
    this.props.getInptModal(ctrlType, metric);
}

Is this the rough idea of how to properly do this? I've been able to set the state with single variables but I'm struggling with updating it with an object.

A:

You described modalValue as an array but you are setting it as an object. 
Either change its type to GridValue or use an array on setState: 
this.setState({
  modalValue: [{
    control: ctrl,
    rowIndex: rindex,
    cellIndex: cindex
  }]
})

