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;

yup its definitely doable. can you post some code?

azium
– azium

2017-09-21 03:43:00 +00:00
Commented Sep 21, 2017 at 3:43 — azium
– azium, Commented Sep 21, 2017 at 3:43
Sorry! Forgot to add the code. It has now been added :)

t1m1t
– t1m1t

2017-09-21 04:07:56 +00:00
Commented Sep 21, 2017 at 4:07 — t1m1t
– t1m1t, Commented Sep 21, 2017 at 4:07

romsearcher · Accepted Answer · 2017-09-21 04:51:18Z

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>
        )
    }
}

Sorry, I got a little lost when setting original state. You said to set the state to handle whichever pane that will display the information. Would I just set this.state = {PaneOne = {image: '"", name: "", description: ""}}
That could be an option. You could also have three different objects in your state, one for each Pane, and depending on the image clicked, you could then set the state for that specific Pane. You could also send an additional parameter to the image_clicked function for the pane number so that you know which Pane object will be changed.
Would I set state in the App component? I've set up the App component as such: this.state = { PaneOne: { profile_img: '', name: '', description: '' }, PaneTwo: { profile_img: '', name: '', description: '' }, PaneThree: { profile_img: '', name: '', description: '' } } this.image_clicked = this.image_clicked.bind(this); }
Would I do the same for in each pane component? Set state with one object rather than three? Sorry, for the confusion. Still new to react...
Thank you for your help! I was able to create a full working application based on the help you gave me! I do have one question though. I made it so that when the image is clicked, state is changed and put into pane1. At that same moment, pane2 would include state from pane1, and pane3 would include state from pane2 (transition). Is there a way to include animation in that transition? For now it's just a quick change.

Collectives™ on Stack Overflow

React image onClick to display in another component?

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related