How to in React Component constructor set this state

I still learn much React JavaScript and now I can’t understand how to create this initial state.

In the constructor here in the code I want to add to state by running this line:

    this.state = CsvViewer.parse(props.data);

And direct after I want to add more state variables like this:

    this.state = {
        filters: {},
        sortColumn: null,
        sortDirection: null,
    };

The problem now is that state does not contain the first call to CsvViewer. How can I add to state both the call to CsvViewer and the other state variables?

Code:

    class CsvViewer extends Component {
        static parse(data) {
            const rows = [];
            const columns = [];
    
            new CSV(data).forEach(array => {
                if (columns.length < 1) {
                    array.forEach((cell, idx) => {
                        columns.push({
                            key: `key-${idx}`,
                            name: cell,
                            resizable: true,
                            sortable: true,
                            filterable: true,
                        });
                    });
                } else {
                    const row = {};
                    array.forEach((cell, idx) => {
                        row[`key-${idx}`] = cell;
                    });
                    rows.push(row);
                }
            });
            return { rows, columns };
        }
    
        constructor(props) {
            super();
            this.state = CsvViewer.parse(props.data);
            this.state = {
                filters: {},
                sortColumn: null,
                sortDirection: null,
            };
        }


    UNSAFE_componentWillReceiveProps(nextProps) {
        // TODO
        this.setState(CsvViewer.parse(nextProps.data));
    }

    handleGridSort = (sortColumn, sortDirection) => {
        // this.setState({ sortColumn, sortDirection });
    };

    render() {
        const { rows, columns } = this.state;
        const { height } = this.props;
        return (
            <ReactDataGrid
                enableCellAutoFocus={false}
                columns={columns}
                rowsCount={rows ? rows.length: 0}
                rowGetter={i => rows[i]}
                minHeight={height || 650}
                onGridSort={this.handleGridSort}
            />
        );
    }
}

export default CsvViewer;

Answer

There’s a few options for adding properties to an object. Here’s the one i would usually do, using spread syntax. It will create a shallow copy of the object returned by parse, and add in the extra properties you define:

this.state = {
  ...CsvViewer.parse(props.data),
  filters: {},
  sortColumn: null,
  sortDirection: null,
}

Object.assign can be used to do something similar:

this.state = Object.assign({}, CsvViewer.parse(props.data), {
  filters: {},
  sortColumn: null,
  sortDirection: null,
});

Or you could just add the individual properties one at a time:

this.state = CsvViewer.parse(props.data);
this.state.filters = {};
this.state.sortColumn = null;
this.state.sortDirection = null;