concatenating function names reactjs

I have a unique situation in React/Next. Essentially, I am iterating in React to create divs. The iterating functionality works beautifully. I now am trying to create hide/show sections for each one of the created divs and I want to use the anchor tag to allow the hiding and showing of hidden divs. I followed [this][1] thread for the hiding element and [this][2] link for concatenating function names. However, I do not think the second link is applicable to concatenate function names in React as it says that showDogFunctions is not a function which is evidently not a good error. Can anyone help? Additionally, if anyone has more concise ways to achieve my functionality that would also be appreciated.

Variable Names are a bit dif but you can easily associate.




If you have a state for each component then the state should actually be in that component. As <div>s do not have state, you need a functional component around them:

 function SingleDog({ counter }) {
    const [show, setShow] = useState(false);

    return (
       <div key={counter} className="user-box">
         <span className="expand-more">
            <a onClick={() => setShow(it => !it)} >Toggle</a>
            {show && <div>Hi there</div>}

 function DogList() {
    const [dogCount, setDogCount] = useState(0);
   const dogs = [];

   for(let count = 0; count < dogCount; count++) {
      dogs.push( <SingleDog counter={counter} /> );

   return <>
     {/* ... more content here */}

If you need to influence the state of all components from the parent, e.g. close all expands, then you need to lift state up again. However instead of having n states, use one state with an array or object, e.g.:

  const [show, setShow] = useState({ });

      setShow={() => setShow(prev => ({ ...prev, [counter]: !prev[counter] }))}