title: how to load an image in another component by click event on sibling component in react
body: <p>I am new to react and wanted to have a basic react app. I have two sibling components. In one component(ImagePreview), in that I have a list of images that I show as a list of thumbnails. I have another component (ImageReal) in which I which I want to show a full scale image.</p>
  <p>I want to update the state of ImageReal such that when an image in the ImagePreview component is clicked, it updates the state in imageReal and that image would show up in ImageReal. I have looked on quite a few examples but I couldn't get my head around may be b/c I am new to this stuff.</p>
  <pre><code>import React from 'react';
  import './styles/app.css';
  import ImagePreview from './components/ImagePreview'
  const ImageList = [{imagePreview: &quot;/image/image1.jpg&quot;},{imagePreview: &quot;/image/image2.jpg&quot;},{imagePreview: &quot;/image/image3.jpg&quot;}];
  function App() {
    return (
      &lt;div className=&quot;flex mb-4&quot;&gt;
    
        &lt;div className=&quot;w-1/4 bg-gray-400 h-screen mx-2 my-1&quot;&gt;
         { ImageList.map(image =&gt; (
      
         &lt;ImagePreview key={image.id} image={image} &gt;&lt;/ImagePreview&gt;
      
        ))}
       &lt;/div&gt;
      &lt;div className=&quot;w-3/4 bg-gray-500 h-screen  mx-2 my-1&quot;&gt;
  
      &lt;/div&gt;
  
   &lt;/div&gt;
   );
  }
  
  export default App;
  </code></pre>
  <p><strong>Image Preview Component</strong></p>
  <pre><code> import React from 'react'
  
    const ImagePreview = ({ image }) =&gt; {
  
    let helloWorld = (e) =&gt; {
     console.log('Hello world :', e.target);
     }
  
  return (
    &lt;div className=&quot;py-5 px-10&quot;&gt;
      &lt;img src={image.previewURL} className=&quot;w-full&quot; onClick={helloWorld}/&gt;
      
    &lt;/div&gt;
  );
  }
  
  export default ImagePreview
  </code></pre>
  <p><strong>ImageReal Component</strong></p>
  <pre><code>import React from 'react'
  
  const ImageReal = ({ image }) =&gt; {
  
  return (
    &lt;div className=&quot;py-5 px-10&quot;&gt;
      &lt;img src={image.previewURL} className=&quot;w-full&quot; /&gt;
      
    &lt;/div&gt;
  );
  }
  
  export default ImageReal
  </code></pre>