How to delete all selected option in select using reactJS

Question

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"));

Answer 1

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

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 [items, setItems] = useState(children);
  const handleChange = () => {
    setItems(null);
  };
  return (
    <>
      <Select defaultValue="a1" onChange={handleChange} style={{ width: 200 }}>
        {children}
      </Select>

      <Select
        mode="tags"
        placeholder="Please select"
        style={{ width: "100%" }}
      >
        {items}
      </Select>
    </>
  );
};

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

When the user makes a selection in the top select input, the bottom select options will be removed.