CODEWITHSUNDEEP
javascriptreactjs
Frank Lucas
Frank Lucas

Reputation: 611

React handleClick on component

I am a complete newbie in React. I created a component which is a button. This component renders out an image, and my goal is to use this image as a favorite button. For now all I wanna do is log something in my console when I click the image.

I used a handleClick event but I think that isn't that simple here's my component:

/**
 * Renders the Favorite button
 */
export default class FavoriteButton extends React.Component
{
    /**
     * Favorite button constructor
     *
     * @param props
     */
    constructor(props)
    {
        super(props);

        this.state = {
            header: "some header test data",
        }
    }

    /**
     * Handle a click event on a Favorite button
     */
    handleClick()
    {
        console.log("hello there");
    }

    /**
     * Renders the Favorite button
     */
    render()
    {
        return(
            <div className="favorite_button">
                <img src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }
}

If anyone can help me out that would be realy awesome!

My ultimate goal is to fire a database action to store the element that you've favorited but for now I just wanna log something :)

Many thanks in advance!

Upvotes: 0

Views: 15283

Answers (3)

user5738822
user5738822

Reputation: 

 render()
    {
        return(
            <div className="favorite_button">
                <img onClick={this.handleClick} src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }

Or If you want use from this button in several components with different functions you must do this : 

 render()
    {
        return(
            <div className="favorite_button">
                <img onClick={this.props.handleClick} src="url" className="" alt="" />
                <div>{this.state.header}</div>
            </div>
        );
    }

and in parent component : 

    class Parent extends Component {

            test (){
                 console.log("hiiii its parent component");
               }

            render(){
                return(
                   <FavoriteButton handleClick={()=>{this.test()}}/>
                 );
            }

}

Upvotes: 1

QoP
QoP

Reputation: 28397

You have added the method handleClick to the component but you have to assign it to an event handler, in this case, onClick.

render()
{
    return(
        <div className="favorite_button">
            <img onClick={this.handleClick} src="url" className="" alt="" />
            <div>{this.state.header}</div>
        </div>
    );
}

If you are going to use this inside handleClick, you have to bind the method to the instance as well.

constructor(props)
{
    super(props);
    this.state = {
        header: "some header test data",
    }
    this.handleClick = this.handleClick.bind(this);
}

Upvotes: 1

Serge Warde
Serge Warde

Reputation: 19

try this :) 

        <div className="favorite_button" onClick={handleClick.bind(this)>
            <img src="url" className="" alt="" />
            <div>{this.state.header}</div>
        </div>

Upvotes: 0

Related Questions