title: React UseEffect - How to retrive selected array data and view that data
body: <p><strong>This is my JSON data File</strong></p>
  <pre><code>{
      &quot;person&quot;: [
  
        {
          &quot;id&quot;: &quot;userId&quot;,
          &quot;sellerImage&quot;: &quot;https://i.pravatar.cc/300&quot;,
          &quot;lastOnline&quot;: &quot;Date of last online&quot;,
          &quot;sellerName&quot;: &quot;Ryann Remo&quot;,
          &quot;isOnline&quot;: true,
          &quot;lastSeenDate&quot;: &quot;Today&quot;,
          &quot;product&quot;:&quot;Rough Shirt&quot;,
          &quot;messages&quot;: [
            {
              &quot;id&quot;: &quot;messageId&quot;,
              &quot;userId&quot;: &quot;userIdOfUser&quot;,
              &quot;message&quot;: &quot;Message text 01&quot;,
              &quot;date&quot;: &quot;Date of message&quot;,
              &quot;time&quot;: &quot;time of message&quot;,
              &quot;isRead&quot;: false
            },
            {
              &quot;id&quot;: &quot;messageId&quot;,
              &quot;userId&quot;: &quot;userIdOfSeller&quot;,
              &quot;message&quot;: &quot;Message text 02&quot;,
              &quot;date&quot;: &quot;Date of message&quot;,
              &quot;time&quot;: &quot;time of message&quot;,
              &quot;isRead&quot;: true
            },
            {
              &quot;id&quot;: &quot;messageId&quot;,
              &quot;userId&quot;: &quot;userIdOfSeller&quot;,
              &quot;message&quot;: &quot;Message text&quot;,
              &quot;date&quot;: &quot;Date of message 03&quot;,
              &quot;time&quot;: &quot;time of message&quot;,
              &quot;isRead&quot;: false
            }
          ]
        },
  
        {
          &quot;id&quot;: &quot;userId&quot;,
          &quot;sellerImage&quot;: &quot;https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50&quot;,
          &quot;lastOnline&quot;: &quot;Date of last online&quot;,
          &quot;sellerName&quot;: &quot;Karp Bonolo&quot;,
          &quot;isOnline&quot;: true,
          &quot;lastSeenDate&quot;: &quot;Yesterday&quot;,
          &quot;product&quot;:&quot;Rough Shirt&quot;,
          &quot;messages&quot;: [
            {
              &quot;id&quot;: &quot;messageId&quot;,
              &quot;userId&quot;: &quot;userIdOfUser&quot;,
              &quot;message&quot;: &quot;Message text&quot;,
              &quot;date&quot;: &quot;Date of message&quot;,
              &quot;time&quot;: &quot;time of message&quot;,
              &quot;isRead&quot;: false
            },
            {
              &quot;id&quot;: &quot;messageId&quot;,
              &quot;userId&quot;: &quot;userIdOfSeller&quot;,
              &quot;message&quot;: &quot;Message text&quot;,
              &quot;date&quot;: &quot;Date of message&quot;,
              &quot;time&quot;: &quot;time of message&quot;,
              &quot;isRead&quot;: true
            },
            {
              &quot;id&quot;: &quot;messageId&quot;,
              &quot;userId&quot;: &quot;userIdOfSeller&quot;,
              &quot;message&quot;: &quot;Message text&quot;,
              &quot;date&quot;: &quot;Date of message&quot;,
              &quot;time&quot;: &quot;time of message&quot;,
              &quot;isRead&quot;: false
            }
          ]
        }
      ]
    }
  </code></pre>
  <p><strong>This is how I'm imported that JSON data</strong></p>
  <pre><code>import AdminConversationData from &quot;./AdminConversation.json&quot;;
  
  const AdminConversation = () =&gt; {
  
  
  
  
    const person = AdminConversationData.person.map((data) =&gt; {
      return {
        ...data,
      };
    });
  
  .....
  </code></pre>
  <p><strong>This is how I'm going to select a person in react file. (Using <code>onClick={() =&gt; setSelectPerson(idx)}</code> I'm going to select a person here using the IDX according to the below code I need to load that person's data to another place on this page.)</strong></p>
  <pre><code>&lt;RadioGroup&gt;
    &lt;div className=&quot;space-y-2&quot;&gt;
      {person.map((item, idx) =&gt; (
        &lt;RadioGroup.Option
          key={item.id}
          value={item.id}
          onClick={() =&gt; setSelectPerson(idx)}
          className={({ active }) =&gt;
            `${
              active
                ? 'ring-2 ring-offset-2 ring-offset-red-300 ring-white ring-opacity-60 border-l-4 border-red-500'
                : ''
            }
              relative rounded-lg shadow-md px-5 py-4 cursor-pointer flex focus:outline-none entry cursor-pointer 
              transform hover:scale-105 duration-300`
          }
          
        &gt;
         
            &lt;&gt;
          &lt;div className=&quot;flex-2&quot;&gt;
            &lt;div className=&quot;w-12 h-12 relative&quot;&gt;
              &lt;img
                className=&quot;w-12 h-12 rounded-full mx-auto&quot;
                src={&quot;https://picsum.photos/200&quot;}
                alt=&quot;chat-user&quot;
              /&gt;
              &lt;span className=&quot;absolute w-4 h-4 bg-gray-400 rounded-full right-0 bottom-0 border-2 border-white&quot;&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex-1 px-2&quot;&gt;
            &lt;div className=&quot;truncate w-32&quot;&gt;
              &lt;span className=&quot;text-gray-800&quot;&gt;{item.sellerName}&lt;/span&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;small className=&quot;text-gray-600&quot;&gt;Yea, Sure!&lt;/small&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;flex-2 text-right&quot;&gt;
            &lt;div&gt;
              &lt;small className=&quot;text-gray-500&quot;&gt;{item.lastSeenDate}&lt;/small&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;small className=&quot;text-xs bg-red-500 text-white rounded-full h-6 w-6 leading-6 text-center inline-block&quot;&gt;
                23
              &lt;/small&gt;
            &lt;/div&gt;
          &lt;/div&gt;
            &lt;/&gt;
        
        &lt;/RadioGroup.Option&gt;
      ))}
    &lt;/div&gt;
  &lt;/RadioGroup&gt;
  </code></pre>
  <p><em><strong>(this is React headless UI radio group and I'm going to select a certain person here.)</strong></em></p>
  <p><strong>In this place, I want to retrieve that person's data as an example the seller's name.</strong></p>
  <pre><code>&lt;&gt;
   &lt;div class=&quot;relative&quot;&gt;
      &lt;span class=&quot;absolute text-green-500 right-0 bottom-0&quot;&gt;
         &lt;svg width=&quot;20&quot; height=&quot;20&quot;&gt;
            &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;8&quot; fill=&quot;currentColor&quot; class=&quot;absolute right-0 w-4 h-4 bg-green-600 border-2 border-green-700 rounded-full top-2 animate-pulse&quot;&gt;&lt;/circle&gt;
         &lt;/svg&gt;
      &lt;/span&gt;
   &lt;img src=&quot;https://images.unsplash.com/photo-1549078642-b2ba4bda0cdb?ixlib=rb-1.2.1&amp;amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;amp;auto=format&amp;amp;fit=facearea&amp;amp;facepad=3&amp;amp;w=144&amp;amp;h=144&quot; alt=&quot;&quot; class=&quot;w-10 sm:w-16 h-10 sm:h-16 rounded-full&quot;/&gt;
   &lt;/div&gt;
   &lt;div class=&quot;flex flex-col leading-tight&quot;&gt;
      &lt;div class=&quot;text-2xl mt-1 flex items-center&quot;&gt;
        &lt;span class=&quot;text-gray-700 mr-3&quot;&gt;Seller Name&lt;/span&gt;
      &lt;/div&gt;
      &lt;span class=&quot;text-lg text-gray-600&quot;&gt;Seller&lt;/span&gt;
  &lt;/div&gt;
  &lt;/&gt;
  </code></pre>
  <p><em><strong>(In here at the seller name place I want to show the selected seller name.)According to the selected person I need to load his name in the above point &quot;Seller Name&quot;, I expect to use React UseEffect. How can I do that ?</strong></em></p>
  <p>UI :
  <a href="https://i.stack.imgur.com/WAG2t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WAG2t.png" alt="enter image description here" /></a></p>