CODEWITHSUNDEEP
javascriptreactjsreact-props
Nelson Silva
Nelson Silva

Reputation: 439

Cant fire method passed by props

Using react, I have a simple console.log('hello') in my app.js. Im passing it by props to a component, "thumbnails group" that will map over an array, create "thumbnails", and each one of them should fire that method with onClick. When I do so, nothing happens. What am I missing ?

App.js

escolheTextura = () => {
    console.log('hello')
};


    <ThumbnailGroup

     escolheTextura={this.escolheTextura}/>

ThumbnailGroup.js

 return (
            <div className={["column", "group"].join(' ')}>
                {
                    props.texturas.map(thumbnail => {
                            return <Thumbnail
                                onClick={() => props.escolheTextura()}>
                                {thumbnail}
                            </Thumbnail>
                        }
                    )
                }
            </div>
    );

Thumbnail.js

    return (

        <div className={["button is-primary", "thumbnail"].join(' ')}>
            <span>
                <figure className={"image is-32x32"}>
                    <img src={"image is-32x32"}/>
                </figure>
            </span>
        </div>
    )
};

Upvotes: 0

Views: 34

Answers (2)

codejockie
codejockie

Reputation: 10892

ThumbnailGroup.js

return (
         <div className={["column", "group"].join(' ')}>
         {
             props.texturas.map(thumbnail => {
                return <Thumbnail
                          escolheTextura ={props.escolheTextura}>
                          {thumbnail}
                       </Thumbnail>
              }
          }
            </div>
    );

Thumbnail.js

    return (
        <div onClick={props.escolheTextura} className={["button is-primary", "thumbnail"].join(' ')}>
            <span>
                <figure className={"image is-32x32"}>
                    <img src={"image is-32x32"}/>
                </figure>
            </span>
        </div>
    )
};

Upvotes: 1

Alex Antonov
Alex Antonov

Reputation: 15206

You should pass props.escolheTextura even further. DOM element receives the click, not a React.js component So, you have to pass your function down to Thumbnail component and make some DOM element, saying div, to handle click event:

ThumbnailGroup.js

return (
        <div className={["column", "group"].join(' ')}>
            {
                props.texturas.map(thumbnail => {
                        return <Thumbnail
                            escolheTextura={props.escolheTextura}>
                            {thumbnail}
                        </Thumbnail>
                    }
                )
            }
        </div>
);

ThumbnailGroup.js

return (

    <div onClick={this.props.escolheTextura} className={["button is-primary", "thumbnail"].join(' ')}>
        <span>
            <figure className={"image is-32x32"}>
                <img src={"image is-32x32"}/>
            </figure>
        </span>
    </div>
)

Upvotes: 1

Related Questions