Why handler calls render method 3 times? - reactjs

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?

Answer 1

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