React image onClick to display in another component?

Question

Is it possible to click on one image in a component and have that onClick display the same image and information in another component? My mind is drawing a blank, and I've been searching for an answer for quite a while now.

I've created a component that displays multiple images. I also created 3 separate components that I would like to display an image and some text based on the image clicked in the first component. I've thought about routing and creating components for each image, but felt that that method is not efficient...

Thank you in advance!

This is the main component:

import React from 'react';
import './app.css';
import ImageSection from './image_section';
import PaneOne from './pane_1';
import PaneTwo from './pane_2';
import PaneThree from './pane_3';


const App = () => (
    <div className="main_section">
        <div className="top_pane_area">
            <PaneOne />
            <PaneTwo />
            <PaneThree />
        </div>
        <div className="bottom_image_area">
            <ImageSection />
        </div>
    </div>
);

export default App;

This is what all three components where I would like the images to be displayed (at the moment; all three components are identical):

import React, { Component } from 'react';
import './app.css';


class PaneOne extends Component {
    render () {
        return (
            <div className="panes">

            </div>
        )
    }
}

export default PaneOne;

And this is the component with the images (at the moment):

import React, { Component } from 'react';
import './app.css';
import one from './imgs/one.jpg';
import two from './imgs/two.jpg';
import three from './imgs/three.jpg';
import four from './imgs/four.jpg';
import five from './imgs/five.jpg';
import six from './imgs/six.jpg';


class ImageSection extends Component {
    render() {
        return(
            <div>
                <div>
                    <img className="prof_pic" src={one} />
                    <img className="prof_pic" src={two} />
                    <img className="prof_pic" src={three} />
                    <img className="prof_pic" src={four} />
                    <img className="prof_pic" src={five} />
                    <img className="prof_pic" src={six} />
                </div>
            </div>
        )
    }
}

export default ImageSection;

Answer 1

Make the parent component send a function that will be received by props by the children component (the one with the images) and by clicking on the image will send information back to the parent on the function. This will allow children to parent communication and will also allow you to send any additional parameters for custom logic. The parent function can then setState or whatever you want depending on the information relayed from the click event on the image.

class App extends Component{
    constructor(props){
        super(props);

        // set the state to handle which of the panes displays the information you want

        this.image_clicked = this.image_clicked.bind(this);
    }

    render(){
        return (
            <div className="main_section">
                <div className="top_pane_area">
                    <PaneOne />
                    <PaneTwo />
                    <PaneThree />
                </div>
                <div className="bottom_image_area">
                    <ImageSection image_clicked={this.image_clicked}/>
                </div>
            </div>
        )
    }

    image_clicked(source){
        // Based on the source or any additional parameter you send do any re-render logic
        // example:
        if (source == 'image1.png'){
            this.setState({pane1 : source});
        }
    }
}

class ImageSection extends Component {
    render() {
        let image_clicked = this.props.image_clicked;

        return(
            <div>
                <div>
                    <img className="prof_pic" src={one} onClick={() => image_clicked(one)}/>
                </div>
            </div>
        )
    }
}