Why handler calls render method 3 times?

Question

I'm working with Semantic-ui and have such component with list of items. Every item has group of checkboxes:

import React, { Component }            from 'react'
import { Divider,Label,List,Checkbox,Header } from 'semantic-ui-react'


export default class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            checkboxes: []
        }
    }

    render() {
        let { tags } = this.props;

        return (
            <div className="ui segment basic" >
                {typeof tags === "undefined" ?
                    <div>Select partner and process</div>
                :
                    this.getTagListItems(tags)
                }
            </div>
        )
    }

    getTagListItems = tagsData => {
        let tags = [];
        for(let i=0; i<tagsData.length; i++){
            if ( tagsData[i].children.length !==0 ) {
                tags.push(
                    <div className="container"  key = { i }>
                        <Header as="h3">{ tagsData[i].name }</Header>
                        <Divider/>
                        <List>
                            {this.getTagCheckboxes(tagsData[i].children)}
                        </List>
                    </div>
                );
            }
        }
        return tags;
    };

    getTagCheckboxes = checkboxData => {
        let checkboxes = [];
        for(let i=0; i<checkboxData.length; i++) {
            checkboxes.push(
                <List.Item key = { checkboxData[i].id }>
                    <Checkbox label   = { checkboxData[i].name }
                              id      = { checkboxData[i].id }
                              onClick = { this.setCheckbox }
                              // checked = { this.state.data.id === checkboxData[i].id }
                    />
                    <List.Content floated="right" >
                        <Label>
                            0
                        </Label>
                    </List.Content>
                </List.Item>
            );
        }
        return checkboxes;
    };

    setCheckbox = (e, itemData) => {
        let { checkboxes } = this.state;
        console.log('ITEMM!!!', itemData)
    }
}

How it can be seen on every checkbox I set onClick, which calls setCheckbox. When I check just 1 checkbox, it calls setCheckbox 3 times and I get in console console.log for 3 times. What's wrong, how can I correct it in order setCheckbox works only 1 time per 1 check?

Have you already compared current/next props? I think it's first you can do to investigate your case. Also, you can change `Component` to `PureComponent`. `PureComponent` provides shallow comparing of your props in `shouldComponentUpdate` lifecycle hook. BTW array index as key in mapper usage can cause bugs — Andrew Paramoshkin, Jan 22 '18 at 12:36
@AndrewParamoshkin thank you for advices, but problem was in onClick. I changed it on onChange and it orked — Sam Fisher, Jan 25 '18 at 13:02

score 0 · Accepted Answer · answered Jan 25 '18 at 13:01

0

Problem was in onClick. I changed it to onChange() and now it works

answered Jan 25 '18 at 13:01

Sam Fisher

746
2
10
27

Why handler calls render method 3 times?

1 Answers1