Why checkboxes don't work correctly?

I'm using this library and want to perform a list of items, and every of them has it's own checkbox. I made generation of these items, and onClick method works ( shows information about clicked checkbox, but it doesn't "draws" that checkbox is checked.Where is the mistake? Here i my code:

mport 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 = {

            }
        }

        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 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.setTag }
                        />
                        <List.Content floated="right" >
                            <Label>
                                0
                            </Label>
                        </List.Content>
                    </List.Item>
                );
            }
            return checkboxes;
        };

        setTag = (e, data) => {
            console.log('Check', data)
        }

    }

Solution

You need to set the checked property for the checkbox that you need to check.

First you need to initialize your state where you will keep the selected value.

constructor(props) {
        super(props);
        this.state = {
            data: {},
        }
}

then you need to compare if the checkbox you are rendering is selected in the state.

<Checkbox label   = { checkboxData[i].name }
          id      = { checkboxData[i].id }
          onClick = { this.setTag }
          checked = { this.state.data.id === checkboxData[i].id }
/>

Finally inside the setTag callback, you need to set the selected value when the user clicks the checkbox

setTag = (e, data) => {
        console.log('Check', data)
        this.setState({ data });
}

This will work as a radio button, because the state can only keep one item at a type, if you want to allow the user to check multiple checkboxes at the same time, you will need to add a checked property to each item, and toggle it when calling onClick