Checkbox state not changing based on redux state

Question

I have a dumb component which takes in a bunch of objects and renders a Checkboxes. The dumb component looks something like this:

// imports

const FilterList = ({ filterTitle, filters, onFilterChange }) => {
  console.log(`FILTERS: ${JSON.stringify(filters)}`);
  return (
    <div>
      <Header colorIndex="light-2" size="small">
        <Label margin="none">
          {filterTitle}
        </Label>
      </Header>
      <List>
        <ListItem direction="column" align="start">
          {filters &&
            filters.map(filter => {
              console.log(filter);
              return (
                <CheckBox
                  key={filter.name}
                  label={filter.name}
                  value={filter.name}
                  checked={filter.checked}
                  onChange={onFilterChange}
                />
              );
            })}
        </ListItem>
      </List>
    </div>
  );
};

FilterList.propTypes = {
  .....
};

export default FilterList;

Now, the filters is an array of objects which looks something like this:

export const find = [
  {
    type: 'find',
    name: 'Apartment',
    searchType: 'text',
    checked: false,
  },
  {
    type: 'find',
    name: 'Assisted Living',
    searchType: 'text',
    checked: false,
  }
];

Now I have a container which handles the onChange event of the Checkboxes and toggles their checked state accordingly. Now, I handle the onChange event correctly, because I see the checked property being true or false reflected in the application state correctly.

I don't understand what happens, but the changes in the store aren't reflected or propagated back to the dumb component and the checkboxes don't change state at all.

Here are links to my container, actions and reducer file:

1) Container: https://gist.github.com/ghoshabhi/ba0feafdb58535150335f6d847e4f562

2) Actions: https://gist.github.com/ghoshabhi/eadec3dd7701afeaac72fd8afb71b94a

3) Reducer: https://gist.github.com/ghoshabhi/7233e7d5143c4b9d8108c5ebb936d60c

Any help or suggestions or alternative methods to do this are welcome.

Thank you!

score 4 · Accepted Answer · answered Jun 12 '17 at 10:58

4

Well, your problem is not related to react or redux, but to plain html. If you include checked attribute, of any value, including false, it will render checked. So if your checkbox should be redered unchecked, you have to omit checked attribute completely.

See : this answer for more details

answered Jun 12 '17 at 10:58

Davorin Ruševljan

4,353
21
27

Thank you so much! Interesting property checked turned out to be :) – Abhishek Ghosh Jun 12 '17 at 15:14
One odd thing I noticed was, in my container, since I was changing the application state (via redux), why weren't my React lifecycle hooks not triggering ? I tried `shouldComponentUpdate` and `componentWillReceiveProps` and none worked! – Abhishek Ghosh Jun 12 '17 at 15:23

Checkbox state not changing based on redux state

1 Answers1