I collapse with multiple onclick methods but how can I make these collapses work with cleaner and less code

Question

import React, { useState } from "react";
import netflixLogo from "../images/netflix.png";
import "../sass/register.css";
import { Link } from "react-router-dom";
import Television from "../images/tv.png";
import NetflixExampleMovie from "../images/netflixExampleMovie.jpg";
import Computer from "../images/computer.png";
import KidsMovie from "../images/kidsMovie.png";
import { AiOutlinePlus } from "react-icons/ai";

function Register() {
const [firstVis, setFirstVis] = useState(true);
const [secondVis, setSecondVis] = useState(true);
const [thirdVis, setThirdVis] = useState(true);
const [fourthVis, setFourthVis] = useState(true);
const [fivethVis, setFivethVis] = useState(true);
const [sixthVis, setSixthVis] = useState(true);
const [vis, setVis] = useState(true);


const changesVisFirst = () => {
setFirstVis(!firstVis);
setSecondVis(true);
setThirdVis(true);
setFourthVis(true);
setFivethVis(true);
setSixthVis(true);
}
const changesVisSecond = () => {
setSecondVis(!secondVis);
setFirstVis(true);
setThirdVis(true);
setFourthVis(true);
setFivethVis(true);
setSixthVis(true);
}
const changesVisThird = () => {
setThirdVis(!thirdVis);
setSecondVis(true);
setFirstVis(true);
setFourthVis(true);
setFivethVis(true);
setSixthVis(true);
}
const changesVisFourth = () => {
setFourthVis(!fourthVis);
setSecondVis(true);
setThirdVis(true);
setFirstVis(true);
setFivethVis(true);
setSixthVis(true);
}
const changesVisFiveth = () => {
setFivethVis(!fivethVis);
setSecondVis(true);
setThirdVis(true);
setFourthVis(true);
setFirstVis(true);
setSixthVis(true);
}
const changesVisSixth = () => {
setSixthVis(!sixthVis);
setSecondVis(true);
setThirdVis(true);
setFourthVis(true);
setFivethVis(true);
setFirstVis(true);
}     


<div className="asked askedFirst">
            <button  className="askedButton" onClick={changesVisFourth}>
              <span>How do I cancel?</span>
              <AiOutlinePlus
                className={fourthVis ? "plusIcon " : "plusIcon rotate  "}
              />
            </button>
            <div
              className={fourthVis ? "answer answerFirst" : "block answerFirst"}
            >
              <p className={fourthVis ? "" : "collapse"}>
                Netflix is flexible. There are no pesky contracts and no
                commitments. You can easily cancel your account online in
                two clicks. There are no cancellation fees – start or stop
                your account anytime.
              </p>
            </div>
          </div>

I've assigned an onclick and a useState for each collapse, but I want to write cleaner and more useful code by assigning a useState and an onClick. I've tried various things but haven't found a solution. I need help developing a method that will cover all collapses and use a useState and an onClick.Maybe the number of these collapses may increase in the future, so instead of always writing one by one, I want to use a more dynamic and useful code for onClick and useStates.

Read about lists or arrays, ids or indices. Then read about functions and create a function which takes an id or index and collapses that element. — Nikhil, Feb 20 '23 at 07:31
Maybe this can help you, https://stackoverflow.com/a/61768903/11095009 — S.Marx, Feb 20 '23 at 07:38

score 0 · Answer 1 · answered Feb 20 '23 at 07:38

You can store all vis members in an array and update it depending on the item index

For example.

import React, { useState } from "react";
import netflixLogo from "../images/netflix.png";
import "../sass/register.css";
import { Link } from "react-router-dom";
import Television from "../images/tv.png";
import NetflixExampleMovie from "../images/netflixExampleMovie.jpg";
import Computer from "../images/computer.png";
import KidsMovie from "../images/kidsMovie.png";
import { AiOutlinePlus } from "react-icons/ai";

function Register() {
const [visArray, setVisArray] = useState([true, true, true, true, true, true])
const [vis, setVis] = useState(true);


const changesVis = (index) => {
  setVisArray(prev => prev.map((item, itemIndex) => {
     return !(index === itemIndex)
  }))
}

<div className="asked askedFirst">
            <button  className="askedButton" onClick={() => changesVis(3)}> // index 3 equal the fourth item.
              <span>How do I cancel?</span>
              <AiOutlinePlus
                className={fourthVis ? "plusIcon " : "plusIcon rotate  "}
              />
            </button>
            <div
              className={fourthVis ? "answer answerFirst" : "block answerFirst"}
            >
              <p className={fourthVis ? "" : "collapse"}>
                Netflix is flexible. There are no pesky contracts and no
                commitments. You can easily cancel your account online in
                two clicks. There are no cancellation fees – start or stop
                your account anytime.
              </p>
            </div>
          </div>

I collapse with multiple onclick methods but how can I make these collapses work with cleaner and less code

1 Answers1