CODEWITHSUNDEEP
javascriptreactjsant-design-pro
GoonGamja
GoonGamja

Reputation: 2286

How to render default value in ant design checkbox using boolean?

I am trying to render a checkbox default value using ant-design.

Here is the data I want to render 

plainOptions: [
    {
        name: "apple",
        is_enabled: "true",
    },
    {
        name: "orange",
        is_enabled: "true"
    },
    {
        name: "banana",
        is_enabled: "true"      
    },
    {
        name: "grape",
        is_enabled: "false",
    },
]

And here is the component : 

                    <FormItemRow>
                        <Col span={24} style={colStyle}>
                            <FormItem label={'fruits'} colon={ false } style={{ marginBottom: 0 }}> 
                                <CheckboxGroup options={plainOptions} defaultValue={['true']}>
                                    {plainOptions.map(option => {
                                        return (
                                            <Checkbox key={option.label}>{option.label}</Checkbox>
                                        )
                                    })}
                                </CheckboxGroup>
                            </FormItem>
                        </Col>
                        </FormItemRow>

I get the result I want to see but the problem of using defaultValue inside of CheckboxGroup component is I get warning saying 

Warning: Encountered two children with the same key, `true`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Seems like defaultValue works as just like key .

I also added checked inside of Check component and assigned boolean value but it does not work either.

How can I safely render a default value inside of checkbox without warning sign?

Upvotes: 2

Views: 18355

Answers (2)

Herat Patel
Herat Patel

Reputation: 798

First of all you used option.label instead of option.name, which gives undefined to all the keys, that's why you are getting warning of same keys.

<Checkbox key={option.name}>{option.name}</Checkbox>

If you are using CheckboxGroup, you don't need to use Checkbox. You can use CheckboxGroup like this...

this.state = {
 plainOptions: ["apple", "orange", "banana", "grape"],
 checkedList: ["apple", "banana"] // Default Value
};

you will get array of values as param of the onChange event

onChange = (checkedList) => {
  this.setState({ checkedList });
}

<CheckboxGroup
  options={this.state.plainOptions}
  value={this.state.checkedList}
  onChange={this.onChange}
/>

In above example I used checkedList initial state for default value and assign latest state on onChange event.

Upvotes: 2

SimonEritsch
SimonEritsch

Reputation: 1307

I actually think, that the key error comes from the fact that you used option.label instead of option.name. (which in this case should be undefined)

You have to differentiate between value and checked. The value is the content, that will be returned if the checkbox is checked.

If you define a value, but the checkbox is not checked, it is not send along anyway.

Maybe turn the checkbox into a controlled input (meaning: you have a onChange event, that triggers a checked state) and pass your is_enabled value in checked prop.

<Checkbox key={option.name} checked={this.state.options[optionKey].is_enabled}>{option.name}</Checkbox>

Upvotes: 2

Related Questions