title: Functional React Components Hooks ---- I want to add play/pause functionality in video list (functional component)
body: <pre><code>const VideoList = ({ videoList }) =&gt; {
  let stateArr:any=[]
  for(let i=0;i&lt;content.videoListItems.length;i++){
  stateArr[i]=true
  }
  const [iconDisplay, setIconHide] = useState(stateArr);   
  const stopVideo=(e:any,index:any)=&gt;{
  stateArr[index]=true
  e.target.parentElement.parentElement.previousSibling.pause();
  }
  const videoPlay=(e:any,index:any)=&gt;{
  stateArr[index]=false
  e.target.parentElement.parentElement.previousSibling.play();
  }
  useEffect(() =&gt; {
  setIconHide(stateArr);
  }, []);
  return (
  &lt;div&gt;
     {videoListItems.map((item: any, index: number) =&gt; {    //rendering video list
     return (
     &lt;div key={index}&gt;
        &lt;video src={item.video.url} /&gt;
        &lt;span&gt;
        {iconDisplay[index] &amp;&amp;&lt;button onClick={(e:any)=&gt;videoPlay(e,index)}&gt;
        &lt;img                               // rendering play image
           src=&quot;play.svg&quot;
           alt=&quot;Play Icon&quot;
           /&gt;
        &lt;/button&gt;}
        {!iconDisplay[index] &amp;&amp; &lt;button onClick={(e:any)=&gt;stopVideo(e,index)}&gt;
        &lt;img
           src=&quot;pause.svg&quot;                  //rendering pause image
           alt=&quot;Pause Icon&quot;
           /&gt;
        &lt;/button&gt;
        }
        &lt;/span&gt;
     &lt;/div&gt;
     )
     })
     }
  &lt;/div&gt;
  )
  }
  </code></pre>
  <p>How can I achieve this functionality. I am trying to render list of videos and based on the event click trying to play and pause but somehow I am unable to render pause image after 1st click</p>