CODEWITHSUNDEEP
reactjs
Asking
Asking

Reputation: 4172

Set default value for input

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

Upvotes: 0

Views: 79

Answers (2)

Hassaan Tauqir
Hassaan Tauqir

Reputation: 2722

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

Upvotes: 0

keikai
keikai

Reputation: 15146

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

Upvotes: 1

Related Questions