title: useState updating for all list elements
body: <p><a href="https://i.stack.imgur.com/FehvQ.png" rel="nofollow noreferrer">Before Clicking on picture</a></p>
  <p><a href="https://i.stack.imgur.com/Q5oVp.png" rel="nofollow noreferrer">After clicking on picture</a></p>
  <p>So I used useState to play with margins and make a description slide down div which initially hides behind the image itself. I am using map() to diplay a list of images with the same properties. But the useState works fine when using a single image. For multiple images clicking o 1 image activates the slidedown div for all the images. I want them to be seperate. Is there any solution to this?</p>
  <pre><code>import React,{useState}  from 'react'
  import Image1 from '../../images/background1.jpg'
  import Image2 from '../../images/background2.jpg'
  import {Arts,ArtHeading,CardContainer, Card,CardImg1,CardDetails,CardText} from './ArtsElements';
  
  const images = [
      { title:&quot;Title1&quot;, src:Image1},
      { title:&quot;Title2&quot;, src:Image1},
      { title:&quot;Title3&quot;, src:Image1},
      { title:&quot;Title4&quot;, src:Image1},
      { title:&quot;Title5&quot;, src:Image1},
      { title:&quot;Title6&quot;, src:Image1},
      { title:&quot;Title7&quot;, src:Image1},
      { title:&quot;Title8&quot;, src:Image1},
      { title:&quot;Title9&quot;, src:Image1},
      { title:&quot;Title10&quot;, src:Image1},
      { title:&quot;Title11&quot;, src:Image1},
      { title:&quot;Title12&quot;, src:Image1},
      { title:&quot;Title13&quot;, src:Image1},
      { title:&quot;Title14&quot;, src:Image1},
  ];
  
  const Artworks = () =&gt; {
      const [isOpen,setIsOpen] = useState(true);
      const toggle = () =&gt; {
          setIsOpen(!isOpen)
      }
      return (
          &lt;Arts &gt;
              &lt;ArtHeading&gt;
                  Artworks
              &lt;/ArtHeading&gt;
          &lt;CardContainer&gt;
          {
          images.map((img,index) =&gt; (
              
                  
                      
                  &lt;Card &gt;
                      
                      {/* &lt;CardImg1 key={index} src={img.src}   /&gt; */}
                      &lt;CardImg1  src={Image1}  onClick={toggle} /&gt;
                      &lt;CardDetails isOpen={isOpen} onClick={toggle} &gt;
                                  &lt;CardText &gt;
                                   title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 
                                   4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4
                                   title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4
                                   title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4
                                   title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4
                                   title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 
                                   title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4
                                   title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4title 4
                                  &lt;/CardText&gt;
                      &lt;/CardDetails&gt;
                      
                      
                  &lt;/Card&gt;
             
                
              
          ))} 
              
              &lt;/CardContainer&gt;
              &lt;/Arts&gt;
      )
  }
  
  export default Artworks
  </code></pre>
  <p>styled components file:</p>
  <pre><code>import styled from 'styled-components'
  
  
  export const Arts = styled.div`
  background-color: #fff;
  margin-bottom: 150px;
  @media screen and  (max-width:768px){
      margin-bottom: 100px;
  }
  @media screen and  (max-width:480px){
      margin-bottom: 100px;
  }
  `
  export const ArtHeading = styled.h1`
  font-size: 50px;
  margin-left: 0px;
  font-weight: bold;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
  @media screen and  (max-width:768px){
      font-size: 50px;
      margin-left: 10px;
  }
  @media screen and  (max-width:480px){
      font-size: 30px;
      margin-left: 0px;
  }
  
  `
  
  export const CardContainer = styled.section`
  margin: 50px auto;
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-gap: 20px;
  
  
  
  
  `
  
  export const Card = styled.div`
  
  
  position: relative;
  height: 430px;
  width:350px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgb(0,0,0,0.5); 
  
  `
  
  
  
  export const CardImg1 = styled.img`
  
  width: 100%;
  height:100%;
  box-sizing: border-box;
  border-radius: 10px;
  
  `
  
  export const CardText = styled.p`
  
  `
  
  export const CardDetails = styled.div`
  background: white;
  border-radius: 10px;
  margin-top:${({isOpen}) =&gt; (isOpen ? '40px' : '440px')};
  transition: 1s ease-in-out;
  cursor: pointer;
  `
  </code></pre>