function Solution() {
const [firstClick,setFirstClick] = useState(true);
const [secondClick,setSecondClick] = useState(true);
const [thirdClick,setThirdClick] = useState(true);
const [fourthClick,setFourthClick] = useState(true);
const [fivethClick,setFivethClick] = useState(true);
const [sixthClick,setSixthClick] = useState(true);
const [seventhClick,setSeventhClick] = useState(true);
const changeIconFirst = () => {
firstClick ? setFirstClick(false) : setFirstClick(true);
setSecondClick(true);
setThirdClick(true);
setFourthClick(true);
setFivethClick(true);
setSixthClick(true);
setSeventhClick(true)
}
const changeIconSecond = () => {
secondClick ? setSecondClick(false) : setSecondClick(true);
setFirstClick(true);
setThirdClick(true);
setFourthClick(true);
setFivethClick(true);
setSixthClick(true);
setSeventhClick(true)
}
const changeIconThird = () => {
thirdClick ? setThirdClick(false) : setThirdClick(true);
setFirstClick(true);
setSecondClick(true);
setFourthClick(true);
setFivethClick(true);
setSixthClick(true);
setSeventhClick(true)
}
const changeIconFourth = () => {
fourthClick ? setFourthClick(false) : setFourthClick(true);
setFirstClick(true);
setSecondClick(true);
setThirdClick(true);
setFivethClick(true);
setSixthClick(true);
setSeventhClick(true)
}
const changeIconFiveth = () => {
fivethClick ? setFivethClick(false) : setFivethClick(true);
setFirstClick(true);
setSecondClick(true);
setThirdClick(true);
setFourthClick(true);
setSixthClick(true);
setSeventhClick(true)
}
const changeIconSixth = () => {
sixthClick ? setSixthClick(false) : setSixthClick(true);
setFirstClick(true);
setSecondClick(true);
setThirdClick(true);
setFourthClick(true);
setFivethClick(true);
setSeventhClick(true)
}
const changeIconSeventh = () => {
seventhClick ? setSeventhClick(false) : setSeventhClick(true);
setFirstClick(true);
setSecondClick(true);
setThirdClick(true);
setFourthClick(true);
setFivethClick(true);
setSixthClick(true);
}
I used more than one useState to open collapse when I clicked it, but I want to set up a simpler and more dynamic structure by using one useState instead of more than one. By doing if else with the true false method, I changed the className to enable collapse to open and close. I did not think of it in the method. I am waiting for your suggestions to create a more dynamic and simpler structure.
CodePudding user response:
This code should work just fine if you have any questions go ahead and ask
function Solution() {
//this is your main useState that will take control of your collapse
const [collapse , setCollapse] = useState(true);
// this is your collapse button you should give it an on click event
<button onClick={() =>setCollapse(!collapse)}>collapse </button>;
}
CodePudding user response:
If you only want to use one single component then u can accomplish by giving each collapse a index.
in the render
<button onClick={()=> setId(1)}>Click</button> // can be 1,2,3,4,5,6,7
in your collapse it can be something like
<CollapseComponent show={id === 1} />
<CollapseComponent show={id === 2} />
<CollapseComponent show={id === 3} />