React/Redux component with checkboxes does not update when click on checkbox

Question

In my component I have checkboxes. When I click on them I want save selected checkbox in redux state and update my component so selected checkbox should shown as checked. So this is my component:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {selectIngredient} from '../actions';
class Ingredient extends Component {
    constructor(props) {
        super(props)
        this.isSelected = this.isSelected.bind(this);
        this.handleCheckbox = this.handleCheckbox.bind(this);

    }


    handleCheckbox(e) {
        const value=e.target.value;
        this.props.selectIngredient(value);
    }


    isSelected(id) {
        return (this.props.selectedIngredients.indexOf(id) > -1)
     }

    render() {
        return (
            <div className="container">
                <div className="form-check checkbox">
                    <label className="form-check-label">
                        <input checked={this.isSelected(1)}
                               className="form-check-input"
                               onClick={this.handleCheckbox}
                               type="checkbox" value="1" />
                        1
                    </label>

                </div>
                <div className="form-check checkbox">
                    <label className="form-check-label">
                        <input checked={this.isSelected(2)}
                               className="form-check-input"
                               onClick={this.handleCheckbox}
                               type="checkbox" value="2" />
                        2
                    </label>

                </div>
                <div className="form-check checkbox">
                    <label className="form-check-label">
                        <input checked={this.isSelected(3)}
                               className="form-check-input"
                               onClick={this.handleCheckbox}
                               type="checkbox" value="3" />
                       3
                    </label>

                </div>
            </div>
        );
    }
}

function mapStateToProps(state, ownProps){
    const {selectedIngredients} = state;
    return {selectedIngredients}

}

export default connect(mapStateToProps,{selectIngredient})(Ingredient);

And this is action/index.js

import {SELECT_INGREDIENT} from "../constants";

export function selectIngredient(selected){
    const action = {
        type: SELECT_INGREDIENT,
        selected
    }
    return action;
}

And here is reducer:

import {SELECT_INGREDIENT} from "../constants";

export default (state={selectedIngredients:[]}, action)=>{
    let stateBefore = Object.assign({},state);
    switch(action.type){
        case SELECT_INGREDIENT:
            const {selected} = action;
            stateBefore['selectedIngredients'].push(+selected);
            return stateBefore

        default:
            return state;
    }

}

When I click on checkboxes nothing changes, they stay empty. Component is not updating. But redux updating its state. I thought if redux state is updating so should the component and its checkboxes. Is it wrong?

Please help me figure out how to make this work. Thank you

The answer given in the comments below:

in your reducer return { ...state, selectedIngredients: [...state.selectedIngredients, action.selected] }

Muhammet Enginar · Accepted Answer · 2017-12-22 12:00:13Z

2

This is a mutation:

  let stateBefore = Object.assign({},state);
  ...
      stateBefore['selectedIngredients'].push(+selected);

You are shallowly copying the state object but you still mutate the selectedIngredients because it is copied by reference so you are still modifying the existing selectedIngredients object.

Check the first answer to following issue https://github.com/reactjs/redux/issues/1769

use object spread operator:

case SELECT_INGREDIENT:
  return {
    ...state, 
    selectedIngredients: [...state.selectedIngredients, action.selected],
  }

edited Dec 22, 2017 at 12:00

answered Dec 22, 2017 at 10:27

Muhammet Enginar

5166 silver badges15 bronze badges

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

6 Comments

Anna Over a year ago

thank you. I'm actually using component state approach before, but now trying to move it to redux

Anna Over a year ago

I thought if redux state is updating so should the component and its checkboxes.

Muhammet Enginar Over a year ago

try not mutating state as referenced in this issue github.com/reactjs/redux/issues/585

Muhammet Enginar Over a year ago

in your reducer return { ...state, selectedIngredients: [...state.selectedIngredients, action.selected] }

Anna Over a year ago

I use stateBefore = Object.assign({},state); to clone state and then work with this new object..is this still mutating ?

|

Collectives™ on Stack Overflow

React/Redux component with checkboxes does not update when click on checkbox

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related