How to delete all selected option in select using reactJS

Hi all I have following code.

I am trying to do following.

When I am choosing some options form second input and then changing first input selected value(s) the second input values should be deleting.

I try useState hook, but it not helping, the second input does not changing defaultValue into undefined.

How can I resolve that?

Here is my code:


    import { Select } from "antd";

    const { Option } = Select;

    const children = [];
    for (let i = 10; i < 36; i++) {
      children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
    }

    const SelectSizesDemo = () => {
      const [clearAll, setClearAll] = useState(undefined);
      const handleChange = () => {
        setClearAll(undefined);
      };
      return (
        <>
          <Select defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
            {children}
          </Select>

          <Select
            mode="tags"
            placeholder="Please select"
            defaultValue={clearAll}
            onChange={handleChange}
            style={{ width: "100%" }}
          >
            {children}
          </Select>
        </>
       );
     };

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

You really are not clear with what you want in your question, but here is an answer.

EDIT: You so horrendously have explained your question. I'm not sure whether or not you want to delete all of the options in the second select when one in the top is selected, or if you want to delete ALL of the options, or just delete the one that is selected. So, here are both solutions. What do you exactly mean by "I need to just show nothing in second select input"???

Remove all from bottom select when one in the top has a selection:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

const SelectSizesDemo = () => {
  const [selected, setSelected] = useState(false);
  const handleChange = () => {
    setSelected(true);
  };
  return (
    <>
      <Select defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
        {children}
      </Select>

      <Select mode="tags" placeholder="Please select" style={{ width: "100%" }}>
        {!selected ? children : null}
      </Select>
    </>
  );
};

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

Remove just the selected one in the top from the bottom:

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

const SelectSizesDemo = () => {
  const [selectedOption, setSelectedOption] = useState(null);
  const handleChange = (val) => {
    setSelectedOption(val)
  };
  return (
    <>
      <Select defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
        {children}
      </Select>

      <Select mode="tags" placeholder="Please select" style={{ width: "100%" }}>
        {children.filter(obj => obj.key !== selectedOption)}
      </Select>
    </>
  );
};

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

Check the last one working on CodeSandbox: https://codesandbox.io/s/sizes-antd-4-18-3-forked-ut8qp?file=/index.js

How to delete all selected option in select using reactJS

Related

Recent Posts