How to update state in react js with spread operator?

Question

I need to filter list of question by category so I decided to add category_id in empty table categories on checkbox change but the table stay empty?

// Définition of state

constructor(props) {
    super(props);
    this.handleCategoryChange.bind(this)
    this.state = {
        filters: []
    }
}

// Checkbox Categories change

handleCategoryChange (category, e) {
    if (e.target.checked) {
        this.setState((state) => ({
            filters: [[...state.filters], ...[category.id]]
        }));
        console.log(this.state.filters) // empty
    }
}

// Checkbox input

render() {
    return (

        <div className="form-check mb-2">
            <input className="form-check-input" type="checkbox" id={'category-'  + this.props.category.id} onChange={(e) => this.handleCategoryChange(this.props.category, e)}/>
            <label className="form-check-label" htmlFor="category">
                { this.props.category.name }
            </label>
        </div>
    )
}

miuosh · Accepted Answer · 2019-03-29 14:47:49Z

1

First of all... setState() is asynchronous operation so console.log(this.state.filters) may or may not be empty. Try code below. You should debug it to work properly after check/uncheck category.

 handleCategoryChange (category, e) {

        if (e.target.checked) {
             const filters = [...this.state.filters,
                   category.id
             ]
            this.setState({
                filters: filters
            });
            console.log(this.state.filters) // empty
        } else {
               //....
         }
    }

answered Mar 29, 2019 at 14:47

miuosh

9363 gold badges14 silver badges38 bronze badges

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

Comments

Lorenz Henk · Accepted Answer · 2019-03-29 14:41:51Z

0

handleCategoryChange (category, e) {
    if (e.target.checked) {
        this.setState((state) => ({
            filters: [...state.filters, ...category.id]
        }), (newState) => console.log(newState.filters));
    } else {
        const newFilters = [...state.filters];
        newFilters.splice(category.id, 1);
        this.setState((state) => {
            const newFilters = [...state.filters];
            newFilters.splice(category.id, 1);
            return {
                filters: [...state.filters, ...category.id]
            }
        }
    }
}

answered Mar 29, 2019 at 14:41

Lorenz Henk

7815 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to update state in react js with spread operator?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related