0

I want to set a default value for ant design component, but i can't. I does not appear. Why? and how to set default value?

link to app: https://codesandbox.io/s/hide-already-selected-ant-design-demo-ezmrw

2 Answers 2

1

For a fully controlled component (value, onChange bound)

You don't need to set defaultValue

Directly init the state with the default value would be fine.

state = {selectedItems: [OPTIONS[0]]};
...
// defaultValue={"test"}
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const OPTIONS = ["Apples", "Nails", "Bananas", "Helicopters"];

class SelectWithHiddenSelectedOptions extends React.Component {
  state = {
    selectedItems: [OPTIONS[0]]
  };

  handleChange = selectedItems => {
    this.setState({ selectedItems });
  };

  render() {
    const { selectedItems } = this.state;
    const filteredOptions = OPTIONS.filter(o => !selectedItems.includes(o));
    return (
      <Select
        placeholder="Inserted are removed"
        value={selectedItems}
        onChange={this.handleChange}
        style={{ width: "100%" }}
      >
        {filteredOptions.map(item => (
          <Select.Option key={item} value={item}>
            {item}
          </Select.Option>
        ))}
      </Select>
    );
  }
}

ReactDOM.render(
  <SelectWithHiddenSelectedOptions />,
  document.getElementById("container")
);

Edit Hide Already Selected - Ant Design Demo

Sign up to request clarification or add additional context in comments.

Comments

0

Remove value from prop in and everything would start working perfectly fine

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.