React Typescript object literal error

Question

I have a component that simply renders a row of data and has a delete button for each row. Clicking delete should simply change the state using a filter to filter out the clicked row. Why do I get the error below.

I tried debugging use the console.log and I am indeed getting the correct row.id and rowId to filter on, but my rows state is not being reassigned.

interface TableSampleProps {
    rows: any[];
}

interface TableSampleState {
    rows: any[];
}

export class TableSample extends React.Component<TableSampleProps, TableSampleState> {
    constructor(props: TableSampleProps) {
        super(props);

        this.state = {
           rows: this.props.rows.concat(),
        };
    }

    public render() {
        return <MyTable rows={this.state.rows} onDeleteRow={this.deleteRow} />;
    }

    private deleteRow = (rowId: number) => {
        // console.log(rowId);
        // this.state.rows.filter((row) => console.log(row.id !== rowId));
        this.setState = {
            rows: this.state.rows.filter((row) => row.id !== rowId),
         };
    }
}

] ERROR in ./src/ts/components/table-sample-tool.tsx [0] (57,13): error TS2322: Type '{ rows: any[]; }' is not assignable to type '{ (f: (prevState: TableSample State, props: TableSampleProps) => Pick, ...'. [0] Object literal may only specify known properties, and 'rows' does not exist in type '{ (f: (prevS tate: TableSampleState, props: TableSampleProps) => Pick, ...'. [0] Child html-webpack-plugin for "index.html": [0] chunk {0} index.html 542 kB [entry] [0]
+ 4 hidden modules [0] webpack: Failed to compile.

Andre Pena · Accepted Answer · 2017-08-15 03:37:40Z

1

Try using setState({rows=... instead of setState = {rows.... You can do this.state = {} in the constructor but setState is a function.

answered Aug 15, 2017 at 3:37

Andre Pena

59.7k53 gold badges213 silver badges257 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mo_maat Over a year ago

Duh!! Totally overlooked that cause I copied from the constructor. Thanks!

Andrew Li Over a year ago

1: Your code is invalid syntax 2: setState is asynchronous. Accessing previous state via this.state inside it does not guarantee you get the previous state @user1991118

Andrew Li · Accepted Answer · 2017-08-15 03:37:35Z

0

That is now how you set state! setState is a function, you don't assign it (hence the error), you call it, passing in an object indicating updated properties in state:

this.setState({
    rows: this.state.rows.filter((row) => row.id !== rowId),
});

Another thing to note is that setState is asynchronous so accessing this.state.rows inside it will not guarantee the previous state. Use a callback for setState, the first argument to the callback will be the previous state, and return an object from the callback like so:

this.setState(prevState => ({
    rows: prevState.rows.filter((row) => row.id !== rowId),
}));

This will guarantee that you're accessing previous state.

answered Aug 15, 2017 at 3:37

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

Collectives™ on Stack Overflow

React Typescript object literal error

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related