Close drop down in React JS-CodePudding

code
<select open={false} autoFocus={true} onClick={this.handleClick} size={5}>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

I have done drop down implementation. i could not close it. i do not want close it by "display:none" any help will be appreciated

CodePudding user response：

Remove the size attribute. change onClick to onChange add value attribute for select tag

 <select value={myCar} onChange={handleChange}>

CodePudding user response：

You can initially show 5 items and, after selecting close it(set to 1 using a state)

import React, { useState } from "react";

function App() {
  const [defaultSize, setDefaultSize] = useState(5);

  const handleClick = () => {
    setDefaultSize(1);

    // do other stuff
  }

  return (
    <div>
      <select open={false} autoFocus={true} onClick={handleClick} size={defaultSize}>
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
    </div>
  );
}

export default App;