CODEWITHSUNDEEP
reactjstypescript
anesthetic
anesthetic

Reputation: 315

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.

Upvotes: 0

Views: 973

Answers (2)

Hemerson Carlin
Hemerson Carlin

Reputation: 7424

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
  }]
})

Upvotes: 1

Christian Santos
Christian Santos

Reputation: 5456

modalValue is expecting an array of GridValue, not just a GridValue. You can either pass in an array of GridValue object(s) or just set your ComponentState's modalValue to a GridValue:

interface ComponentState {
    results: InChartModel[];
    loading: boolean;
    control: string;
    modalValue: GridValue; // not an array
}

Upvotes: 0

Related Questions