How to write this.handle click in functional component in ReactJS-CodePudding

I want to hide and show dropdown div On click using one satate. in this medthod all divs are opening at one click.

if I click button1 div 1 should open if I click button2 div 2 should open

How to write this.click in functional component, please help me

const [dropdownOpen, setdropdownOpen] = useState(false);
const handleDropdown = () =>{
    setdropdownOpen(!dropdownOpen)
}

div{
display:none
}

.dropdown-menu.show{
display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={handleDropdown}>Button 1</button>
<button type="button" onClick={handleDropdown}>Button 2</button>
<button type="button" onClick={handleDropdown}>Button 3</button>

 <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
 </div>

CodePudding user response：

I think you should use an array state here. That seems to be the simplest way to do it for me. All divs and correspondingly buttons should have their separate state variable. And toggling them should do the trick.

To uniquely identify you might use a data-attribute to link a button to its div. I have used data-reactid.

To keep it generic, the below code just maps over the array to generate the different divs. The second argument of the map callback function is the index, so leveraged that.

const [dropdownOpen, setdropdownOpen] = useState([false,false,false]);
const handleDropdown = (e) =>{
    let newArray=  [...dropdownOpen];
    newArray[e.target.dataset.reactid] = !newArray[e.target.dataset.reactid];
    setdropdownOpen(newArray)
}

div{
display:none
}

.dropdown-menu.show{
display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={handleDropdown} data-reactid={1}>Button 1</button>
<button type="button" onClick={handleDropdown} data-reactid={2}>Button 2</button>
<button type="button" onClick={handleDropdown} data-reactid={3}>Button 3</button>

{dropdownOpen.map( (x,index) => {
return <div className={`dropdown-menu ${x === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 `Div ${index 1}`
 </div>
})

Note: The snippet does not work. I just copied yours.

CodePudding user response：

If you have three divs, you need three state values. You can use an object, an array, or three different useState hooks.

Here's an example using an array:

const [dropdownOpen, setdropdownOpen] = useState([false,false,false]);
const handleDropdown = (idx) => {
    setdropdownOpen(dropdownOpen.map((v,i) => i === idx ? !v : v)
}


<button type="button" onClick={handleDropdown(0)}>Button 1</button>
<button type="button" onClick={handleDropdown(1)}>Button 2</button>
<button type="button" onClick={handleDropdown(2)}>Button 3</button>

 <div className={`dropdown-menu ${dropdownOpen[0] === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen[1] === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen[2] === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
 </div>

CodePudding user response：

const handleDropdown = (id) =>{
   if(id==='div1'){
   setdropdownOpen(true)
   }
   if(id==='div2'){
   setdropdownOpen(true)
   }
    if(id==='div3'){
   setdropdownOpen(true)
   }   
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={() =>handleDropdown('div1')}>Button 1</button>
<button type="button" onClick={() =>handleDropdown('div2')}>Button 2</button>
<button type="button" onClick={() =>handleDropdown('div3')}>Button 3</button>

 <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
 </div>