title: Reactjs expand only 1 list item from lists rendered via map function
body: <p>I have a list-items in react project which are rendered by map function to the UI</p>
  <p>Here is the code below</p>
  <p>parent component</p>
  <pre><code>export default function PackageDetails({ newArray, packages }) {
    const [show, setShow] = useState(false)
    const setOpenFunction = () =&gt; {
      setShow(!show)
    }
    return (
      &lt;Row&gt;    
        &lt;NonRecommendedPackage
          setOpen={setOpenFunction}
          show={show}
          packages={packages}
        /&gt;
      &lt;/Row&gt;
    )
  }
  </code></pre>
  <p>Child components</p>
  <pre><code>export default function RecommendedPackage({ setOpen, show ,packages}) {
    return (
      packages.map((item, index) =&gt; {
        return (
          &lt;React.Fragment key={index}&gt;
            &lt;div className=&quot;not-recommended-packages&quot; id={index}&gt;
              &lt;div className=&quot;main-results-row&quot;&gt;
  
                &lt;div className=&quot;package-item package-price&quot;&gt;{item.price} € /ano&lt;/div&gt;
  
  
  
                &lt;button className=&quot;plus-icon-button&quot;&gt;
                  &lt;span className=&quot;plus-text&quot;&gt;+&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              {show &amp;&amp; &lt;div className=&quot;main-info&quot;&gt;THIS DIV GETS DISPLAYED WHEN USER CLICKS ON ANY LIST ITEM&lt;/div&gt;}
            &lt;/div&gt;
  
            
          &lt;/React.Fragment&gt;
        )
      })
    )
  }
  </code></pre>
  <p>So like my list has 10 item and if i select the item at position 2 , only i want that div to expand and show my &quot;main-info&quot; div which is rendered by condition in the above code</p>
  <pre><code>{show &amp;&amp; &lt;div className=&quot;main-info&quot;&gt;THIS DIV GETS DISPLAYED WHEN USER CLICKS ON ANY LIST ITEM&lt;/div&gt;}
  </code></pre>