onClick inside mapped object JSX for React NextJS not working

Question

I have a component :

import React, { Component } from 'react';
import ImageItem from '../components/ImageItem';

class ImageList extends Component {

    handleClick() {
        console.log('Testing testing...'); // ---> This is not working.
    }
    render() {
        const images = this.props.images.map(image => {
            return (
                <ImageItem
                    onClick={this.handleClick}
                    key={image.id}
                    image={image.src}
                    title={image.title}
                />
            );
        });

        return (
            <div className="image-list" ref={el => (this.el = el)}>
                {images}
            </div>
        );
    }
}

export default ImageList;

However, my onClick is not console logging anything out when it is inside the mapped function.

This is my ImageItem component:

import React, { Component } from 'react';

class ImageItem extends Component {
    render() {
        return (
            <a href="#">
                <img
                    className="portfolio-image"
                    src={this.props.image}
                    alt={this.props.title}
                />
            </a>
        );
    }
}

export default ImageItem;

What am I doing wrong here?

Take a look at [this answer](https://stackoverflow.com/questions/30148827/this-is-undefined-inside-map-function-reactjs), you can pass in this as a second argument to use it inside of a map function. — Chris B., Sep 12 '19 at 23:03
@RutherfordWonkington but as you can see my code, I am already using arrow function here. So the context of 'this' should not be an issue. — Sankalp Singha, Sep 12 '19 at 23:04
True. If it is a context issue, you could convert to a functional component and eliminate having to refer to ```this``` at all, that should tell you at least if that's the reason it's not firing. — Chris B., Sep 12 '19 at 23:07
@Jake updated my question to also show my ImageItem component. — Sankalp Singha, Sep 12 '19 at 23:08
@RutherfordWonkington the thing is, it is not giving me any error at all!! I mean its not even doing anything. So I do not understand what is happenning. — Sankalp Singha, Sep 12 '19 at 23:08

score 4 · Accepted Answer · answered Sep 12 '19 at 23:08

4

You are not assigning the click handler to your component it should look like this :

class ImageItem extends Component {
    render() {
        return (
            <a href="#" onClick={this.props.onClick}>
                <img
                    className="portfolio-image"
                    src={this.props.image}
                    alt={this.props.title}
                />
            </a>
        );
    }
}

export default ImageItem;

answered Sep 12 '19 at 23:08

Jake

712
7
20

But why cant I use the onClick directly on the Parent? – Sankalp Singha Sep 12 '19 at 23:09
1

Because `onClick` isn't a native prop for custom components. When used on a custom component it is just like any other prop, doesn't do anything until you actually use/assign it. – Jayce444 Sep 12 '19 at 23:11
@Jayce444 aaah ok! So for all the native components ( other jsx html elements ) it acts like a native component? – Sankalp Singha Sep 12 '19 at 23:13
@Jake Thank you for the answer. I understood that parents can be passed props like this but did not think of this for the onClick ( I thought it was native for all components ) – Sankalp Singha Sep 12 '19 at 23:17
@SankalpSingha correct, same with props like `className` or `id`. On traditional HTML elements like `div` and `span` it will actually apply them to the element. For custom components you actually have to apply them manually within the component. – Jayce444 Sep 13 '19 at 00:27

onClick inside mapped object JSX for React NextJS not working

1 Answers1