Is there a way to access 'this' children of the component in React?

Viewed 25

I'm working with Class Components, I have a main picture and a smaller pictures gallery from an array. The structure I have for those components is all pictures container that contains both main picture and smaller pictures, and a smaller picture container that maps the pictures from the gallery (each picture is another component). I wanted to add a state in the all pictures component, that handles the change of the main pic, so it would get the index of the small picture that is clicked and transmits it to the main picture, so it changes into the clicked picture. As I'm working with Class Components, I'm using this.props and when I add the handleClick function, console.log(this.props) shows {productGal: Array(7)}. Is there any way to get the clicked children of "this"?

I'm attaching the structure: All picture gallery

class ProductDetailPhotoGallery extends Component {
state ={
    imageSource: this.props.productGal[0]
} 

handlePictureChange = () => {
    console.log(this.props)
    this.setState({
    imageSource: this.props.productGal[3] //check if the picture changes
   })
}

render() {
    return (
        <ProductPhotoGalleryContainer>
            <ProductPageMiniatureImages 
            productGal={this.props.productGal}
            handlePictureChange={this.handlePictureChange}
            />
            <ProductPageDetailedImage 
            imageSrc={this.state.imageSource}
             />
        </ProductPhotoGalleryContainer>
    )
}

}

Small Pictures Container

class ProductPageMiniatureImages extends Component {


render() {
    return (
        <ProductMiniatureImageContainer>
            {this.props.productGal.map((singlePrd, ind) => <ProductSmallImage 
            key={ind}
            id={ind}
            imageSrc={singlePrd} 
            imageAlt={'Product image'}
            handlePictureChange={this.props.handlePictureChange}
            />)}
        </ProductMiniatureImageContainer>
    )

Small Picture Component

class ProductSmallImage extends Component {

    render() {
        return (
            <>
                <SmallProductImage 
                onClick={this.props.handlePictureChange}
                src={this.props.imageSrc}
                alt={this.props.imageAlt}
                id={this.props.id}               
                />
            </>

        )
    }
}
1 Answers

The short answer is "no".

A longer explanation: React approach is one-way data flow: from the parent to its children and not the other way around. This approach makes your application's code simpler to understand and maintain.

There are a few ways to pass state between different components, the most trivial one is to create the state in the first "parent" that is above all related children in the hierarchy tree, for example, if we want the state to be approachable from nodes 1, 6 and 7 - we should create it at 3:

enter image description here

using useState hook and passing it down to the relevant children.

There are other ways to pass context around, such as useContext hook and react-redux.

Related